IE7 CSS寬度：100％問題

我正在爲基於響應％的網格的CSS模板工作。我早些時候使用過IE7，並且做了一些愚蠢的事情，我猜，現在它不起作用。IE7 CSS寬度：100％問題

它目前是如何工作的：

列基於個百分點。因此1/3寬度列（.col-1-3）將是width:32% + margin-left:1% + padding:1%。這主要是基於克里斯科伊爾的Don't Overthink It Grids。

在現代瀏覽器中，填充不會影響div寬度。但在IE7中呢。所以我有IE類（.lt-ie8），可容納1％的填充。 .lt-ie8 .col-1-3 { width: 30%; }。因此，30％寬度+ 1％空白左側+ 2％填充左/右* 3 - 1％：第一個孩子= 100％。對？爲什麼不在IE7中工作？

解決方案：

我可以使用behavior: url(/scripts/boxsizing.htc)，但希望能沒有這個可行的。

或者使用JS來計算寬度，然後減去1px。我認爲這會奏效，但這並不理想。

或以99％的寬度結算。也不理想。

我很喜歡純CSS的解決方案。有什麼想法嗎？

來源

2013-01-18 dmathisen

很高興看到有人真的先徹底研究過他們的問題。 – Charles

您的問題的一部分可能是舍入錯誤。因此，通常不建議使用基於百分比的尺寸，*特別是在混合寬度/填充/邊距時。 –

@CharlesTian我一直在尋找一個小時的答案......這就是我帶來的。 – dmathisen

我沒有測試過這個，但也許你可以嘗試把一個div放在另一個裏面，並且在內部div中有填充或邊距？就像這樣：

<div style="width:33%;padding:0;margin:0;"> 
<div style="padding:3%;margin:3%;"> 
Content here 
</div> 
</div>

再次，不知道這是否會工作，但它是值得一試。

來源

2013-01-18 19:27:48 Charles

謝謝Charles。我認爲這會起作用，但希望不會創建額外的標記。我正在尋找可能不存在的解決方案。也許我太挑剔:) – dmathisen

是的，CSS樣式的跨瀏覽器兼容性有時候確實很痛苦。你是對的，但這會產生很多額外的標記。如果有完美的解決方案，我希望你能找到它。祝你好運！ – Charles

:) prob not（friggin'IE）。謝謝。 – dmathisen

IE7 CSS寬度：100％問題

回答

相關問題