如何让 IE 支持 min-width / max-width CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5968779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make IE support min-width / max-width CSS properties?
提问by Dan Burton
Are these properties not considered standard CSS?
这些属性不被视为标准 CSS 吗？
I'm using something like this, which works properly on Chrome 12, FF4, Opera 11, and Safari 5, but on IE9 the min-width is not respected if width < min-width.
我正在使用这样的东西，它在 Chrome 12、FF4、Opera 11 和 Safari 5 上正常工作，但在 IE9 上，如果width < min-width.
<span style="float:left; width:11%; min-width:150px;">
...
</span>
Edit: a little annoyed at the liberal editing and migrating of my question, but w/e. Here's a fuller example that shows a clear difference in IE9 vs other browsers.
编辑：对我的问题的自由编辑和迁移有点恼火，但 w/e。这是一个更完整的示例，它显示了 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>
Edit 2: As noted in Kevin's comment below, adding <!DOCTYPE html>to the beginning solves the IE issue.
编辑 2：正如下面凯文的评论中所指出的，添加<!DOCTYPE html>到开头可以解决 IE 问题。
采纳答案by Kevin Peno
If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-widthif widthis less than 150pxper this jsfiddle.
如果你说的是真的，IE9 将偏离规范。但是，我不能重复您的投诉。使用你的榜样，IE9方面min-width，如果width低于150px每本的jsfiddle。
EDIT:
编辑：
NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).
注意：Quirks 模式遵循不同的规则，不符合任何浏览器的标准 CSS。如果您向页面添加文档类型，这应该可以解决问题（添加：）<!DOCTYPE html>。
To expand on the issue, Quirks Mode is not standardized. There are some things that mostbrowser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoringnew css values, as they have no place in Quirks Mode.
为了扩展这个问题，Quirks Mode 没有标准化。大多数浏览器都实现了一些东西，但在这些事实上的标准中没有定义新功能。因此，一些浏览器允许使用新的 CSS（正如您所观察到的），但 IE9忽略了新的 css 值，因为它们在 Quirks 模式中没有位置。
回答by Drew Beck
I found that <!DOCTYPE html>was insufficient —?I had to go strict:
我发现这<!DOCTYPE html>还不够——？我必须严格：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by Ch?a bi?t
Try following code:
尝试以下代码：
#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}
//html:
<div id="limit-size"></div>
