我正在为基于 % 的响应式网格开发 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 的解决方案。有什么想法吗?