0

我正在为基于 % 的响应式网格开发 CSS 模板。我想我早些时候让它与 IE7 一起工作并且做了一些愚蠢的事情，现在它不工作了。

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

目前如何运作：

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

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

解决方案：

我可以使用behavior: url(/scripts/boxsizing.htc)，但希望在没有的情况下使其可行。

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

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

我想要一个纯 CSS 的解决方案。有什么想法吗？

4

1 回答 1

0

我没有对此进行测试，但也许你可以尝试将一个 div 放在另一个 div 中，并在内部 div 中使用填充或边距？像这样的东西：

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

同样，不确定这是否可行，但值得一试。

于 2013-01-18T19:27:48.007 回答