Рендеринг Firefox 5 сильно отличается от предыдущей версии - PullRequest
Новая
       22

Рендеринг Firefox 5 сильно отличается от предыдущей версии

0 голосов
/ 29 июня 2011

Firefox 5 делает мой сайт очень странным. Я использую Blueprint CSS Framework. Это было нормально до Firefox 5.

Например,

enter image description here

HTML-код для захвата: 

<div class="span-24 last">
<table class="stripe">
<thead>
<tr>
<th class="span-2">Date</th>
<th class="span-15">Subject</th>
<th class="span-2">Actions</th>
</tr>
</thead>
<tbody><tr>
<td>09/28/2009</td>
<td>
<a class="subject" href="/posts/278?locale=en">acts_as_list scope</a>

</td>
<td>
<a title="Edit" class="icon" href="/posts/278/edit?locale=en"><span class="ss_sprite ss_page_white_edit">&nbsp;</span></a>
<a title="Delete" rel="nofollow" data-method="delete" data-confirm="Are you sure?" class="icon" href="/posts/278?locale=en"><span class="ss_sprite ss_delete">&nbsp;</span></a>
</td>
</tr>
<tr class="even">
<td></td>
<td colspan="2">
<p>acts_as_list :scope =&gt; :parent (_id is optional. Use symbol instead of string)</p>
<p>acts_as_list :scope =&gt; 'board_name = \'#{board_name}\''</p>
<p>If scope column is not 'xxx_id', use the form above.</p>
<p>use single quote.</p>
<p>&nbsp;</p>
<p>http://macdiggs.com/2007/08/27/customizing-scope-in-acts_as_list/</p>
</td>
</tr>
</tbody></table>
<hr>
</div>

Или иногда ячейки th в tr заключаются в несколько строк.

enter image description here

Here's related css:
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
  display: inline;
  float: left;
  margin-right: 10px;
}
* html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {
  overflow-x: hidden;
}
.span-15 {
  width: 590px;
}

Я создал пример jsFiddle на http://jsfiddle.net/cgTaB/

Что происходит?

Sam

Ответы [ 2 ]

1 голос
/ 29 июня 2011

Я возился с твоим кодом и думаю, что нашел проблему.Вы используете: 

display:inline

и 

float:left

в своих заголовках.Удалите эти свойства и добавьте width к вашему span-2 классу.

Дайте мне знать, если это помогло:)

0 голосов
/ 29 июня 2011

Проблема в том, что вы применяете стиль display: inline к элементам th.Хотя они явно не определены как блочные элементы, -ые элементы считаются блочными элементами , поскольку они могут содержать элементы блочного уровня.

Хотя это могло быть просто невинной ошибкой со стороны дизайнера, япредпочитаю думать, что это потому, что blueprint.css плохая таблица стилей;)

Если вы примените display: table-cell к вашим th элементам после blueprint.css , как в thisобновите свой jsfiddle , он должен отображаться нормально.

Еще одна причина, чтобы выкинуть план как можно быстрее.

...