Question

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

我正在寻找一种仅限CSS的方法来在Firefox，IE6，IE7和IE8上使用min-width。众所周知，IE不支持min-width，因此有几个hacks试图模拟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>

有没有人有办法让这个工作？

Answer 1

所以事实证明，在所有浏览器中使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>

Answer 2

我用：

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

Answer 3

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

Answer 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">

Answer 5

经过这么多次黑客攻击后，我尝试过这个“min-width”问题并没有为我工作，但最后我得到了IE 8的解决方案。

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

因此，对于最小宽度和最小高度问题，它很容易解决许多IE8问题。

如果我的帖子可以帮助您，请将您的姓名邮寄给我，这对您有用。

Answer 6

尝试添加：

overflow: visible

到元素

Answer 7

我遇到类似的问题，我需要一个95％的网站，除非它低于980px。

这里没有任何作品，在绝望中我接触了比尔伯灵顿的表达答案。上面提到的那个对我来说不起作用，但如果我使用了更强大的表达式，那就完成了！

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

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

Answer 8

<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>

IE6,7和8中的CSS最小宽度

8 个答案: