2

我有一个非常简单的页面，其中包含一个包含 3 个 seciotns 的包装器（浮动：左；宽度：33.333%）。

#wrapper{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.row{
    width: 100%;
    _height: expression(this.height > 384 ? 384: true);
    max-height: 384px;  
    margin-bottom: 30px;
    overflow: hidden;
}  
.row:after
{
    content: "";
    display: table;
    clear: both;
}
.row .column{
    float: left;    
    width: 33.333%;
    height: 100%;
    line-height: 0; 
    overflow: hidden;
} 
.row .column .item {
    width: 100%;
    height: 50%;
    overflow: hidden;
}

现在我让它们与除 Safari 和 Opera 之外的所有浏览器完美配合，在搜索堆栈溢出和谷歌很多之后，我发现了几个类似的问题，没有真正的工作解决方案......一个人建议让第三列浮动正确并且是 34% 宽，而第一列和第二列是 33%，但这并没有成功..右边仍然有一个超小像素..

所以基本上它似乎是一个四舍五入的问题，我读了很多，但由于我无法改变设计，所以我正在寻找解决方法......

我目前的解决方案是避免在 safari/opera 上进行流畅的设计……但我绝对不会为此感到自豪……

在这里，我快速地处理 html + css：http: //jsfiddle.net/ventie30/N9SFJ/

只是为了给你更多信息，我有 3 行和 3 列，行由 40px 分隔。

4

0 回答 0