2013-01-02 18 views
0

看起來,FireFox(17.0.1)在使用表格單元格顯示和使用浮動元素設置父寬度時會錯誤地計算寬度,不包含父寬度中浮動元素的寬度。這似乎在Chrome,IE8,IE9和IE10中工作。在FireFox中使用display表格單元格和浮動元素時寬度錯誤

​​

如果可能的話,我正在尋找一個CSS唯一的解決方法,因爲這是現有的。某些HTML可能沒有意義,但我已經取消了90%,以使該示例更清晰。

我已經注意到一些表格單元的錯誤,其中一些父元素需要顯示:表格,顯示:表格行...但我找不到可用的組合。

此外,我試圖避免硬編碼寬度。

+0

添加'float:left'到'.cell'選項? – j08691

+0

不幸的是,這不起作用,因爲它消除了表格單元的好處,特別是垂直對齊。我更新了樣本以放回垂直對齊。 –

+0

你可以改變順序:把'.cell'放在'.right'之前? – Pavlo

回答

1

讓您的生活更輕鬆去除float: right; 並在div容器中加入display: table-row;

http://jsfiddle.net/Riskbreaker/u9RU4/1/

我在FF-鉻IE9和IE8-和Safari瀏覽器測試,這個給你。 ......這是除非你需要漂浮....

+0

關閉,但浮動:右對齊內容。我更新了HTML,因此第二個選項的文本較少,以突出顯示佈局。 –

+0

然後呢?: '.right { display:table-cell; float:right; }' – Riskbreaker

+0

這對我不起作用。它對你有用嗎? –