100％的寬度大於父母的div

我正在研究vBulletin主題，但在線程列表中，每個線程的寬度都爲100％，但線程也比父母的大，但是當我刪除線程邊界時，它們將適合父母的分區:)。所以認爲這個問題是在邊界上。100％的寬度大於父母的div

你可以看到更好的jsfiddle（線程是白色形狀與黑色邊框）

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

來源

2013-08-03 AmirHosein KazemNejad

這裏的問題是，width是一個大小與文本的內部區域，並與邊框的填充被「包裹」在它周圍。該規範沒有意義，但大多數現代瀏覽器都遵循它。

你的救星被稱爲box-sizing: border-box;。

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

看吧：此屬性here和herejsFiddle

更多信息。

來源

2013-08-03 09:31:00 MightyPork

是的，你是對的，邊界推出元素的「寬度」。這是現代瀏覽器的默認box-sizing。

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

需要注意的是它不支持IE8下面根據這樣你在做什麼，你想要的支持，你可能需要找到一個替代的解決方案或設計：這可以用最喜歡的聲明進行修改。

編輯

它已經一段時間，因爲我原來的答覆和瀏覽器支持略有改變。 Firefox 29，Chrome 10，Safari 5.1和Internet Explorer 8以上版本都不支持box-sizing，但是有幾個特定版本的已知問題。

全/向上最新名單可在caniuse.com但這裏是少數的人，我發現從該網站重要：

IE8：如果使用最小/最大寬度/高度忽略box-sizing: border-box
IE8：所述min-width屬性應用於content-box即使box-sizing設置爲border-box
IE9：滾動條的寬度從元件的寬度時設置爲position: absolute，要麼overflow: auto減去或overflow-y: scroll

隨着IE8和IE9的市場份額下降，這些問題和其他上市的問題將不再是未來的問題。

來源

2013-08-03 09:31:12 Turnerj

按Ctrl + C主的鏈接，但他不是一個造型textarea的：通過http://css-tricks.com/box-sizing/ – MightyPork

顯然2P @！不只是張貼一個小提琴的鏈接，然後編輯我的答案一堆的巨大風扇。 ;）也是提問人的練習和學習的一部分。 – Turnerj

哦，是的，但它肯定不會傷害到''textarea'替換'.threadbit .thread'在複製的片段？ – MightyPork

請務必記住，當您遇到與從firefox開發工具或chrome的metrix框中通過框模型的元素的寬度檢查維度有關的問題時。其送花兒給人一個好主意，包括

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

還要確保檢查顯示屬性。如果一個元素是內聯顯示的，它不會佔用寬度，邊距&填充值，如果它顯示爲內嵌塊，則取寬度，邊距&填充。

這裏是箱式施膠性http://www.paulirish.com/2012/box-sizing-border-box-ftw/

來源

2013-08-03 09:56:57

100％的寬度大於父母的div

回答

相關問題