IE6、7 和 8 中的 CSS 最小宽度答案

【问题标题】：CSS min-width in IE6, 7, and 8IE6、7 和 8 中的 CSS 最小宽度
【发布时间】：2011-01-22 07:51:25
【问题描述】：

我在 Google 上找到了很多关于这个问题的答案，但似乎没有一个适用于所有浏览器。

我正在寻找一种仅使用 CSS 的方法来让 min-width 在 Firefox、IE6、IE7 和 IE8 上工作。众所周知，IE 不支持 min-width，因此有几个 hack 试图模拟 min-width 的行为。不幸的是，我和他们没有运气。

具体来说，这就是我想要做的：

<style type="text/css">
    table.dataTable td {
        white-space: nowrap;
    }

    table.dataTable td.largeCell {
        white-space: normal;
        min-width: 300px;
    }
</style>

<table class="dataTable">
  <tr>
    <td>ID</td>
    <td>Date</td>
    <td>Title</td>
    <td class="largeCell">A large amount of data like a description that could
        span several lines within this cell.</td>
    <td>Link</td>
  </tr>
</table>

有没有人有办法让它工作？

【问题讨论】：

min-width 在 IE >= 7 中受支持（尽管版本 7 中存在错误）。 Firefox 多年来一直支持它。
Firefox 不是问题。只是我需要一个适用于所有这些浏览器的解决方案。另外，我正在 IE8 中测试 min-width，但它不适合我。
对于所有回答的人，我正在努力尝试您的解决方案。
如果它在 IE8 中不起作用，您可能处于“怪癖模式”。您的 HTML 是否有 DOCTYPE，如果有，是哪一个？
这是我们的文档类型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标签： css internet-explorer

【解决方案1】：

我遇到了类似的问题，我需要一个 95% 的网站，除非它小于 980 像素。

这里没有任何效果，我绝望地求助于比尔伯灵顿的表情答案。上面提到的那个对我不起作用，但是如果我使用更健壮的表达式，它就可以了！

width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );

这基本上是说如果宽度小于 980px，则将宽度设置为 980px。如果它更宽，请将宽度设置为 95%。

【讨论】：

【解决方案2】：

经过这么多 hack 之后，我尝试了其中没有一个适合我解决这个“最小宽度”问题，但最终我得到了 IE 8 的解决方案。

尝试使用：<!DOCTYPE html> 作为您的 DOC 类型，这是一种 HTML 5 DOC 类型，可以将您的 IE8 页面的行为类似于 mozilla 或 webkit 浏览器。

所以除了最小宽度和最小高度问题，它很容易解决很多IE8问题。

如果我的帖子对你有帮助，请用你的名字发邮件给我，这对你有用。

【讨论】：

【解决方案3】：

尝试添加：

overflow: visible

到元素

【讨论】：

【解决方案4】：

默认情况下，IE 中的文档模式为 Quirks 模式

解决方案：在您的 html 页面顶部添加 doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

【解决方案5】：

min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');

【讨论】：

这个对我来说失败了。你总能成为一名激流漂流向导。不过，可能没有对抗 IE 漏洞那么多的刺激。
嘿嘿..那将是一个好工作..我希望我能用它得分更多......:)我喜欢你的评论..

【解决方案6】：

所以事实证明，让 min-width 在所有浏览器中工作的必要技巧并不像许多人想象的那么难看。

我所要做的就是为 largeCell 中的 div 添加 CSS 并在单元格末尾添加一个空 div。 div 只有 1px 高，所以它并没有真正让单元格看起来比它应该的大。

<style type="text/css">
    table.dataTable td {
        white-space: nowrap;
    }

    table.dataTable td.largeCell {
        white-space: normal;
        min-width: 300px;
    }

    table.dataTable td.largeCell div {
        margin: 0px 0px 0px 0px;
        height: 1px;
        width: 300px;
    }
</style>

<table class="dataTable">
  <tr>
    <td>ID</td>
    <td>Date</td>
    <td>Title</td>
    <td class="largeCell">A large amount of data like a description that could
        span several lines within this cell.
      <div></div>
    </td>
    <td>Link</td>
  </tr>
</table>

【讨论】：

【解决方案7】：

<style type="text/css">
.table1 th a {
    display:inline-block;
    width:200px";
}
</style>

<table>
    <tr>
        <th><a>title1</a></th>
        <th><a>title2</a></th>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

【讨论】：

【解决方案8】：

我用：

min-width: 200px;
_width: 200px; /* IE6 */

【讨论】：

_width 是仅 IE6 可识别的 css 值吗？不幸的是，这对我不起作用。
是的，你可以使用 _anything 声明一个仅限 IE6 的属性，那是在 IE6 黑客时代，但我建议你现在使用条件 cmets