1. 首頁
  2. 問答
  3. 爲什麼不按預期在webKit和Gecko中嵌套div寬度渲染？

爲什麼不按預期在webKit和Gecko中嵌套div寬度渲染？

2010-12-07 26 views
2

這是我的代碼：爲什麼不按預期在webKit和Gecko中嵌套div寬度渲染？

我假設我做錯了什麼，但我期待在右邊的填充也是2px？

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div{border:solid 1px gray;} 
    #outer{width:200px; padding:2px;} 
    #inner{width:100%;} 
    </style> 
</head> 
<body> 
    <div id="outer"> 
    <div id="inner">&nbsp;</div> 
    </div> 
</body> 
</html>

渲染：
alt text

來源

2010-12-07 Babiker

回答

2

你的問題是，您所指定的內框的大小是大小的外包裝盒相同。將寬度設置爲自動並且問題消失。

填充會在對象周圍形成一個額外的不可見框，所以外部的實際大小大於200.但是，它的內部是200.與邊框相同。在內框上，當你指定它爲100％時，它將是200px，但邊框將佔用2px，使得它看起來像填充沒有被應用的偏移量。

來源

2010-12-07 03:57:41 Cine

+0

謝謝，你有道理，但將寬度設置爲自動完全不像設置寬度。解決此問題的唯一方法是指定內部div的寬度以正確呈現？ – Babiker 2010-12-07 04:00:16

1

div是一個塊級元素，根據定義將其擴展爲考慮到任何邊距，填充和邊框，佔據其父容器的全部寬度。將#inner寬度指定爲100％與將其設置爲200px的效果相同。只要刪除寬度聲明，你就會全部設置。

來源

2010-12-07 04:17:24 bigwebguy

相關問題

 相關問題