您的位置: 首页 / Design / 一个 W3C CSS 的问题

一个 W3C CSS 的问题

Published at Aug 4, 8pm / Keywords: , , , ,

难得老板发慈悲,今天给放了一天假。突然间有做一点东西的想法,但在写 CSS 的过程中遇到了一个很棘手的问题。虽然我用了一个方法“绕过”了这个问题,但这并不是理想的解决方法。

其实这个问题说来也很普通:假如有这样的 HTML
[code]

[/code]
想实现的效果是让这个 div 撑满它的父元素,并且留有一定的 padding。
在 Internet Explore 中,由于它对 width 和 height 这两个 CSS 属性解释是错误的(不符合 W3C 标准),反而很容易实现这个效果,代码如下:
[code lang=”css”]
#foo {
width: 100%;
height: 100%;
padding: 5px;
}
[/code]
但是在能正确解释 W3C CSS 的浏览器上(如 Firefox Opera Safari),问题就出现了。由于 W3C CSS 中对 width 和 height 的定义为 content width/height ,所以 padding 应该是在 content 的外面,而不是 IE 解释的在里面。于是 #foo 这个 div 就越出了界限,得不到正确的结果。尝试了一下用 max-height / max-width 限制,但结果不是正确的。总之依靠 CSS 我无法得到正确的结果。

受 IE 特有的 CSS 属性 expression 的启发,我用 Javascript 解决了这个问题。简单的原理就是获得其父元素的宽度和高度,然后对 foo.style.width/height 赋值即可。但这样解决有几个弊端:

  1. 不具有通用性
  2. 对于未开启 Javascript 的用户无法实现效果
  3. 效率不高
  4. 烦琐

但是目前我还是没找到如何在符合 W3C 标准的浏览器上利用纯 CSS 解决 xx% - xxpx 的方法。在这里 iStef 向各位高手请教这个问题,如果您知道如何解决,或者有什么想法建议,请回复或引用本文,或者给我一些相应的参考资料也可以,谢谢各位啦!

附我制作的关于 HTML box 的 W3C CSS 定义,希望对您有用:

W3C CSS Box Defination

发表您的观点或推荐本文 Loading...