做一個div的總寬度相同均嚴格和怪癖模式

考慮以下做一個div的總寬度相同均嚴格和怪癖模式

<div style="width:150px;border:50px solid black">Test</div>

如果這是輸出到的是IE8呈現在嚴格模式下一個頁面（或者加載到Firefox等），然後在在div的內部（測試的白色區域）寬度爲150px，但div總數爲50 + 150 + 50 = 250px寬度（佔邊界）

如果這是以怪癖模式呈現，那麼它只會是50 + 50 + 50 = 150px寬。

的區別在於怪癖寬度包括作爲解釋here

如果你是把一個HTML片段到頁面上的任何邊界，你不提前知道哪些模式將被使用的時間是沒有任何可靠的黑客（ css/javascript或其他），以確保div在所有主流瀏覽器（IE6/7/8，Firefox，Opera，Chrome）的Strict/Quirks模式下都具有相同的整體尺寸？

來源

2010-01-22 Ryan

應該說是我見過的方式在JavaScript這樣做，但有沒有可能做到這一點沒有？ http://stackoverflow.com/questions/221307/width-of-an-element-accounting-for-quirks-mode-in-javascript – Ryan 2010-01-22 20:41:29

我想我已經得到了它的破碎（在IE測試6/7/8怪癖和嚴格的模式和FF3.5）

Quriks /嚴格模式上一個div的寬度不同，只有在有填充/涉及的邊界。

所以製作一個外部div來設置寬度，然後是一個帶有邊框的內部div。

內部div受到外部div的寬度約束 - 並且這兩個quirks/strict模式都會呈現相同的大小。

即

<div style="width:150px;border:50px solid black">Test</div>

成爲

<div style="width:150px;"> 
    <div style="border:50px solid black">Test</div> 
</div>

來源

2010-01-26 22:24:45 Ryan

這就是box-sizing屬性。見this guide。

來源

2010-01-22 20:43:28

看起來像那只是IE8，我希望有一個簡單的方法可以可靠地工作在IE6 +和作爲獎金FF等不要問我多嗎？ ;） – Ryan 2010-01-22 20:51:22

我能想到的唯一可靠的方法是跳過一些（或很多）CSS樣式 - 邊框爲一。如果你堅持基礎（例如帶有背景色的div），並且不需要過多的填充和邊距，你應該可以得到相當一致的結果。

在一個側面說明 - 已經很難讓瀏覽器在一個文檔類型中看起來如何，甚至是嚴格的。

來源

2010-01-22 20:50:04 ylebre

做一個div的總寬度相同均嚴格和怪癖模式

回答

相關問題