我在谷歌搜索的网上发现了这个
参见这里的文章:http://www.thatcssguy.com/limit-your-divs/
看他的最终版面:http://www.nodivs.com/
一些文章的引文
1
当我限制div的使用时,包括IE6和IE7在内的所有主要浏览器都会将站点呈现得几乎完美。或者只需要很少的修复。
2
它很神奇,但是证明了div和表是布局所必需的。
我们应该试着建立这样的网站吗?
发布于 2010-03-08 11:14:34
本文就如何避免“分割”提出了一些好的观点,即在语义上更合适的元素中使用div元素。但这一点:
当我限制div的使用时,包括IE6和IE7在内的所有主要浏览器都会将站点呈现得几乎完美。或者只需要很少的修复。
完全是胡扯。DIVs是非常有效的容器元素,在很多情况下都是有意义的。只有在语义上更合适的元素(如菜单之类的无序列表中的ul、标题的h1 h2 h3、有序列表的ol )中,使用div才是错误的,因为使用table进行布局通常是错误的。
你提到的这个网站的作者公然滥用dl (定义列表)等其他元素作为div元素的代名词,这和滥用divs作为ul ol的代名词一样愚蠢。看看W3C对ul、ol和dl列表的定义,自己考虑这些元素是否应该像作者所使用的那样执行布局任务。
据我所见,不使用div使网站呈现更好的跨浏览器的暗示完全是骗人的。如果我错了,请纠正我,但我想不出有一个例子是正确的。
发布于 2010-03-08 11:45:36
他的观点是在元素上使用样式,而不是在div中自动包装它们:
<ul class="navList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>而不是
<div class="navList">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>但是,当他使用绝对定位将一个h1与一个h2覆盖起来以创建他的头部时,他就失去了我。
可维护性和干净的代码一样重要。当我看到一个名为"header“的div时,我知道与此相反的是什么:
<h1 class="border"><a href="#" id="logo">Welcome to NoDivs.com</a></h1>
<h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>他也不去实践他的说教。任何使用“间隔”div在div之间添加填充物的人都不应该谈论分裂的危险。:)
发布于 2010-03-08 11:27:43
你引述了这篇文章,但作者本人在评论中说:
不使用DIVs会使站点呈现更可靠的跨浏览器。您正在删除代码中的一个元素,该元素可能是浏览器的源,但显示不正确。删除变量,您将看到更少的问题。
因此:为标题切换div并不会改变呈现的可靠性(本文暗示了这一点,但作者并不这么认为),但是删除不必要的嵌套div元素对此有所帮助,但作为一个良好的HTML层,您应该始终这样做;
只要记住,只要有可能,你就应该防止分裂炎,并且使用语义正确的标记可以帮助你的搜索引擎优化工作和可访问性、业力等等。
编辑:
好吧,大家都知道,分裂症是不好的。让我们看看这篇文章的标记:
<body>
<div id="page">
<div id="header">
<h1 id=logo">(some stuff)</h1>
<ul id="nav1">navi</ul>
</div>
<div id="columns">
(Content)
</div>
<div class="box6">
<div class="top"></div>
<div class="spacer">
<div class="col3">
</div>
<div class="col3">
</div>
<div class="col3 last">
</div>
<br class="fix">
</div>
<div class="bot"></div>
</div>
<div id="footer">
(Footer Content)
</div>
</div>
(Script tags)
</body>让我们看看:<div id="page">用margin: 0 auto;对页面进行居中。将此样式应用于<body>,您可以删除一个div。<div class="box6">的全部内容并不完全没有div,而且绝对没有必要。其余的:你自己去看看。
https://stackoverflow.com/questions/2400823
复制相似问题