MSIE 6 中的最小宽度

Posted 2023-03-06

【中文标题】MSIE 6 中的最小宽度

【英文标题】：Min-width in MSIE 6

【发布时间】：2010-09-10 17:35:05

【问题描述】：

在 Internet Explorer 6 中模拟 CSS 属性 min-width 的明确方法是什么？是不是最好不要尝试？

【参考方案1】：

将您的 css 标签设置为 _Width: 500px 或其他。

【参考方案2】：

foo  min-width: 100px       // for everyone
* html foo  width: 100px    // just for IE

（或使用 conditional comments 为 IE 提供单独的样式表）

【讨论】：

这不会在 IE 中提供最小宽度。你实际上只是放弃了 IE...

Prestaul，IE6 将宽度视为最小宽度。

我的理解是这将在 IE6 中有效，但在 IE7 中无效：blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx

对我来说，适用于 min-height 的相同修复似乎在 IE6 和 IE7 中都有效！

min-* 适用于 IE 8。也许您应该发布一个新问题来详细说明您的具体问题。

【参考方案3】：

这很好用……

div.container 
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 

【讨论】：

该 CSS 不会验证 W3C 标准。此外，它可能会导致不良影响 [456bereastreet.com/archive/200611/…。此外，CSS 应该只有表现形式，而不是行为。

谁在乎它是否会验证，这些东西可能会使用户的浏览器崩溃。很容易陷入无限循环的情况，因为几乎所有事件都会对表达式进行评估，例如回流事件，并且表达式本身也会导致回流。如果不格外小心，回流事件可能会冒泡回到表达式绑定的元素。

是的，这段代码确实有潜在的灾难。它需要检查宽度是否小于七百六十-一。

【参考方案4】：

This article 由 Stu Nicholls 在 CSS Play 上展示了在 IE、所有模式（Quirks 等）甚至 IE/Mac 中实现最小宽度的不同方法。

【参考方案5】：

您可以使用表达式（如 HBoss 建议的那样），但如果您担心性能，那么最好的方法是在要应用最小宽度的元素内添加一个 shim。

<div id="container">
  The "shim" div will hold the container div open to at least 500px!
  You should be able to put it anywhere in the container div.
  <div class="shim">&nbsp;</div>
</div>

#container .shim 
  width: 500px;
  height: 0;
  line-height: 0;

这需要一点非语义标记，但它是一个真正的跨浏览器解决方案，不需要使用表达式的开销。

【讨论】：

错字：实体是  代表你的代码中的不间断空格 &nsbp;

好收获！在此发布两年半后！

lex parsimoniae.

【参考方案6】：

Min-height fast hack 适用于我（也适用于宽度）

【参考方案7】：

使用条件 cmets 来引用和 MSIE 6 特定的样式表，然后如下创建 CSS。

兼容的浏览器将使用：

min-width: 660px;

然后 MSIE 6 将使用：

width: expression((document.body.clientWidth < 659)? "660px" : "auto");

【讨论】：

查看 Hugoware 的回答，了解为什么这样做的表达式不好。

【参考方案8】：

在过去的一个月里，我一直在修改这里给出的每一个答案。并且在玩过 Pretaul 的方法 (Min-width in MSIE 6) 之后，它似乎是 min-width 的最佳替代方案。没有 hack 或任何东西，只需 30 秒即可实现兼容的 CSS 代码。

通过谷歌搜索，表达式似乎是最受欢迎的。无论如何，对我来说，它倾向于随机锁定我的浏览器（IE 和 FF）。

【参考方案9】：

shim 示例适用于在容器达到特定大小时强制浏览器显示水平滚动条，但您会注意到容器中的内容仍会随着窗口变小而调整大小。我想这不是尝试在 IE 6 中实现最小宽度时的总体目标。

Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg

此外，使用表达式和其他疯狂的 CSS hack 并不是好的做法。它们不安全也不干净。 article 解释了 CSS hack 的注意事项以及为什么应该完全避免它们。

我个人认为scarryjeff 的帖子是在 IE6 中实现真正的最小宽度的最佳建议，作为一名经验丰富的 CSS 布局开发人员，我还没有找到适用于此类问题的更好解决方案。

Stu Nicholls 在 CSS Play 上的 article 展示了在 IE、所有模式（Quirks 等）甚至 IE/Mac 中实现最小宽度的不同方法。

我提供了一个类似问题的答案，详细说明了如何使用这种技术正确实现最小宽度。可以在这里查看：

CSS: Two 50% fluid columns not respecting min width

该技术是简单、有效的 CSS，几乎可以在任何情况下使用。应用于上面的 shim 示例，它会产生我认为正确的最小宽度功能。

Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg

【参考方案10】：

我不知道，我在以下方面取得了一些成功：

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

dustin diaz 的 min-height fast hack 和 How do I specify in HTML or CSS the absolute minimum width of a table cell 的组合

【参考方案11】：

单行按钮

button
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap