如何使IE支持min-width/max-width CSS属性?

Dan*_*ton 14 css standards internet-explorer

这些属性不被视为标准CSS吗?

我正在使用这样的东西,它可以在Chrome 12,FF4,Opera 11和Safari 5上正常工作,但在IE9上,如果使用的话,最小宽度不受尊重width < min-width.

<span style="float:left; width:11%; min-width:150px;">
    ...
</span>
Run Code Online (Sandbox Code Playgroud)

编辑:对自由编辑和迁移我的问题有点恼火,但没有.这是一个更全面的例子,显示了IE9与其他浏览器的明显区别.

<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>
Run Code Online (Sandbox Code Playgroud)

编辑2:如下面Kevin的评论中所述,添加<!DOCTYPE html>到开头解决了IE问题.

Kev*_*eno 13

如果你说的是真的,IE9将偏离规范.但是,我无法复制您的投诉.使用你的榜样,IE9尊重min-width,如果width低于150px本的jsfiddle.

编辑:

注意:Quirks模式遵循不同的规则,并且不符合任何浏览器中的标准CSS.如果您向页面添加doctype,这应该可以解决问题(添加:) <!DOCTYPE html>.

为了扩展这个问题,Quirks Mode不是标准化的.大多数浏览器都会实现一些功能,但这些事实标准中未定义新功能.因此,一些浏览器允许使用新的CSS(正如您所观察到的),但IE9 忽略了新的css值,因为它们在Quirks模式中没有位置.

  • @Dan,这是因为你在Quirks模式下运行!Quirks模式遵循不同的规则,并且不符合任何浏览器中的标准CSS.如果您向页面添加doctype,这应解决问题(添加:`<!DOCTYPE html>`). (2认同)
  • bytheway ..这也解决了居中div的问题:IE正确显示页面没有text-align:center in css(即我之前找到的hack用于居中问题) (2认同)