css - IE7 CSS 宽度 :100% issue

Question

我正在为基于百分比的响应式网格制作 CSS 模板。我之前让它在 IE7 上运行，然后做了一些愚蠢的事情，我猜，现在它不工作了。

http://danmathisen.com/lightbase-css/

目前的运作方式:

列是基于百分比的。所以 1/3 宽度的列 (.col-1-3) 将是 width:32% + margin-left:1% + 填充:1%。这在很大程度上基于 Chris Coyier 的 Don't Overthink It Grids .

在现代浏览器中，填充不会影响 div 宽度。但在 IE7 中它确实如此。所以我有适应 1% 填充的 IE 类 (.lt-ie8)。 .lt-ie8 .col-1-3 { 宽度:30%； }。所以 30% 宽度 + 1% margin-left + 2% padding left/right * 3 - 1% :first-child = 100%。正确的？ 为什么这在 IE7 中不起作用？

解决方案:

我可以使用 behavior: url(/scripts/boxsizing.htc) 但希望在没有的情况下也能正常工作。

或者用JS计算宽度再减去1px。我认为这可行，但并不理想。

或者以 99% 宽度解决。也不理想。

我喜欢纯 CSS 解决方案。有什么想法吗？

Answer 1

我还没有对此进行测试，但也许您可以尝试将一个 div 放在另一个 div 中，并在内部 div 中添加填充或边距？像这样:

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

同样，不确定这是否有效，但值得一试。