html - Firefox CSS 错误 - "Skinny Width"

Question

Chrome、IE 和 Safari 都按预期显示代码。但是，Firefox 为任何未包含在“p”标签中的文本提供“瘦列”。

但是它确实可以在较小的宽度下使用媒体查询正确显示。也许与 .event-container 类的 Margin 和 Padding 有关系。

Here's a Screen Show of a page viewed in Firefox.

Here's the JS Fiddle Page.

HTML:

<article class="event-container">
    <header class="entry-header">
        <h1 class="entry-title" itemprop="name">TITLE</h1> 
        <p class="entry-meta">META INFO</p>
    </header>
    <div class="entry-content">
        <div class="event-wrap">    
            <div class="event-row">
                <div class="event-column event-label">COL 1</div>
                <div class="event-column event-text"><p class="first">Here's some text for Column 2. Lots of Text Here.</p><p>Here's some more text and this displays properly in Firefox.</p></div>
            </div>
            <div class="event-row">
                <div class="event-column event-label">LIST</div>
                <div class="event-column event-text">
                    <ul>
                        <li>LIST ITEM</li>
                        <li>LIST ITEM</li>
                        <li>LIST ITEM</li>
                        <li>LIST ITEM</li>
                    </ul>
                </div>
            </div>
        </div>
   </div>

CSS:

.event-container {
    display: table;
}

.event-container ul, 
.event-container ul li {
    padding: 0;
    margin: 0;
    list-style:none;
}

.event-container p {
    padding: 10px 0 0 0;
}

.event-container p.first {
    padding: 0;
}

.event-container .event-wrap {
    float:right;
    width:100%;
    margin-left: -180px;
    padding-left: 180px;
}

.event-container .event-wrap .event-row {
    float: left;
    display: block;
    clear: both;
}

.event-container .event-wrap .event-row .event-column {
    margin-bottom: 10px;
}

.event-container .event-wrap .event-row .event-column.event-label {
    float: left;
    width: 100px;
    margin-right: 10px;
    font-weight: bold;
}

.event-container .event-wrap .event-row .event-column.event-text {
    overflow: hidden;
}

.event-container .ad {
    float: left; 
    width: 160px;
}

@media only screen and (max-width: 768px) {
    .event-container .ad {
        float: left; 
        width: 160px;
    }

    .event-container .event-wrap {
        padding:0;
        margin:0;
    }

    .event-container .event-wrap, 
    .event-container .event-wrap .event-row .event-column, 
    .event-container .event-wrap .event-row .event-column.event-label, 
    .event-container .event-wrap .event-row .event-column.event-text {
        float: left;
        width: 100%;
        clear: both;
    }

    .event-container .event-wrap .event-row {
        margin-bottom: 10px;
    }

    .event-container .event-wrap .event-row .event-column {
        margin-bottom: 0;
    }
}

Answer 1

好的，我想我知道发生了什么。当屏幕尺寸太小时，“事件行”列似乎重叠。为了堆叠它们，您需要删除此 CSS 的 float (第 1519 行)

.event-container .event-wrap .event-row, .club-container .club-wrap .club-row, .vendor-container .vendor-wrap .vendor-row {
    display: block;
/*Removed
    clear: both;
    float: left;
*/
}

删除该代码似乎可以在 Firefox 中正确显示列。如果您希望它仅在特定屏幕尺寸时触发，您需要将其包装在 @media 调用中。希望对您有所帮助。