1

通常对于大多数基于 DIV 的布局，我按以下方式对页面（外部骨架）进行编码；

<body>
<div class="wrapper">
    <div class="minwidth">
        <div class="layout">
            <div class="container">
                <div class="content">
                                          //Some content....
                </div>
            </div>
        </div>
    </div>
</div>
</body>

下面是我使用的 CSS；

html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}

现在我必须承认，由于我更喜欢​​ UI 开发（而不是布局设计），我并不完全理解“为什么”实际使用了其中一些 div。我的猜测是，其中一些 div 被用作旧版 IE 缺乏最小宽度支持的一种 HACK。

所以我的问题是；

  1. 请让我知道上面的布局代码是否是标准的并且是跨浏览器兼容性所必需的（假设也有一定的最小宽度要求）
  2. 您是否认为只有旧 IE 中的最小宽度支持才需要这么多 div，而最新的 IE（如 IE8/9）是否完全支持最小宽度？
  3. 我现在想设计一个流畅的布局，即一个应该在多个平台上无缝工作的布局（桌面/平板电脑，如 iPad 和一定程度的移动设备）
  4. 请建议任何其他骨架结构，以确保根据屏幕分辨率（台式机/平板电脑等）进行良好调整的流畅布局
4

1 回答 1

-1

1.

好吧，我从来没有见过min-width用旧浏览器实现的这种方式。

2.

不，这绝对没有必要。

如果你只对此感兴趣，min-width应该为 ie6 做。

http://www.cssplay.co.uk/boxes/width.html

这是实现min-width和的一种方法max-width。

http://cameronmoll.com/archives/000892.html

编辑：

因此，要使包括 ie6 在内的跨浏览器工作，你可以像上面的这个例子一样做，除了 min-width .. 为了最简单的 html 和 css 这将是要走的路。

唯一的缺点是，如果访问者没有打开 JS ......那么这将无济于事。如果一个人足够聪明，可以禁用 JS 并且他仍然使用 ie6，那么我认为那是用户的问题..

http://jsfiddle.net/sr7WJ/ - 在第一个宽度值（带有 javascript 的那个）中有一些额外的值至关重要，我个人相信比实际值多 30 多……但他们说再多 2 就足够了。在某些情况下，您可能需要为 ie6 破解或使用条件注释。

3. / 4.

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

http://www.maxdesign.com.au/articles/liquid/

于 2011-08-28T10:25:57.960 回答