Firefox CSS Error - «Skinny Width»

Chrome, IE & Safari выводит код по своему усмотрению. Тем не менее, Firefox предоставляет «Skinny Columns» для любого текста, не обернутого в теги «p».Firefox CSS Error - «Skinny Width»

Однако он отображается справа, используя медиа-запрос с меньшей шириной. Возможно, это имеет какое-то отношение к Margin и Padding в классе .event-container.

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; 
    } 
}

источник

2015-01-09 J.S.T. Andrews

HTML и CSS, которые вы предоставили, не помогают выяснить, что происходит с вашими столбцами. Либо предоставите более релевантный код, либо создайте JS.Fiddle, который воспроизводит вашу проблему. Благодарю. – crazymatt

Добавлено [JS Fiddle Page.] (Http://jsfiddle.net/a8bo6qcj/3/) –

Хорошо, я думаю, МЕЕТСЯ Что происходит. Кажется, что столбцы «строка события» перекрываются, когда размер экрана становится слишком маленьким. Для того, чтобы складывать их вам нужно будет удалить поплавок для этого CSS (строка 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. Надеюсь, это поможет.

источник

2015-01-09 22:07:17 crazymatt

Это сделало это, Мэтт. Благодаря! –

Firefox CSS Error - «Skinny Width»

ответ

Смежные вопросы