Firefox 5渲染與以前版本非常不同

Firefox 5非常奇怪地渲染我的網站。我使用Blueprint CSS框架。這是確定的Firefox 5.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>

或者有時候，在TR Th細胞被包裹在多個線。

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

我創建了http://jsfiddle.net/cgTaB/

一個的jsfiddle例如這是怎麼回事？

山姆

來源

2011-06-29 Sam Kong

您可以製作一個[jsFiddle]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）測試用例來證明同樣的問題嗎？ – thirtydot

你能否提供你用於這段代碼的CSS代碼:)？ –

個人喜好：我鄙視'blueprint.css'。 'screen.css // grid.css'是我見過的最噁心的CSS文件之一。 – rockerest

我一直在擺弄你的代碼，我想我找到了問題。您正在使用：

display:inline

在你的頭

和

float:left

。刪除這些屬性並在您的span-2類中添加width。

讓我知道，如果這有助於:)

來源

2011-06-29 17:34:10

的問題是，你申請的display: inline風格的th元素。雖然沒有明確定義爲塊元素，但是由於它們可以包含塊級元素，因此它們都是th elements are considered block elements。

雖然這或許只是一個無辜的錯誤設計師的部分，我更願意認爲這是因爲blueprint.css是一個貧窮的樣式表）

如果你申請display: table-cell您th元素藍圖之後。 css，如this update to your jsfiddle，它應該顯示正常。

以儘可能快的速度轉儲藍圖的另一個原因。

來源

2011-06-29 17:36:16 rockerest

是的，你是對的。令人驚訝的是，相同的代碼在Firefox 4中運行良好。謝謝！ –

Firefox 5渲染與以前版本非常不同

回答

相關問題