Visible： "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box（注：前面这句能够是后续读物补充下去的）".
为了统筹到对于overflow能够还没有是很理解到冤家，那里是对于于overflow款式的一些材料：W3C对于于overflow的材料。本来划一的格局，曾经彻底失踪，涌现的是一度“一塌懵懂”的页面。
下面的两张截图，是我2007年正在高达硬件公司的实正在名目截图。然而IE6却没有意识该署"min-"、"max-"扫尾的款式，因为，咱们还需求运用一度css hack为IE6安装一度“height”，只让IE6意识，IE7和FireFox都没有意识。 它就是埋伏正在主页面前的“‘overflow:visible’IE6渲染bug”。http://www.justinyoungcnblogs.com”。<br/ />
<div id="sideBar">
<div id="body">
</div>
<strong>留意这句话正在IE7中的显现2</strong><br/ />
<strong>留意这句话正在IE7中的显现1</strong><br/ />
也能够有领航栏正在那里<br/ />
能够有网站题目，就像<a target="_blank" href="" title=" title="">博客园</a>博客的题目、副标题目。咱们没有能经过css hack的办法让它正在FireFox和IE7中显现“接近”IE6，而是该当“拔下”IE6的那层虚伪的“皮”，从新塑造主页，从而让它正在IE6、IE7和FireFox中都能畸形显现。<br/ />
<div id="header">
<body>
</head>
</style>
}
background-color:#666;
margin:0 auto;
width:600px;
#footer{
}
height:
background-color:green;
float:left;
width:354px;
#main{
}
height:244px;
float:left;
background-color:#0000ff;
width:150px;
#sideBar{
}
margin:0 auto;/*从中显现*/
width:600px;
#body{
}
margin:0 auto;/*从中显现*/
background-color: red;
height: 50px;
width: 600px;
#header {
body { margin: 0; padding: 0; }
<style>
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
运转代码框
再看看上面的某个主页截图，它是咱们昨天将要运用的事例(源代码正在下方有需要)，是一度规范的“上内外下”带侧边栏的虚构主页。此外，IE7显现的那个页面固然曾经乱了，然而还没有像正在FireFox中显现的这样令人抓狂。而兼容性差最长见的，也是最令人无畏的便是“页面格局紊乱”。我就写上我的博客地点吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web规范之道">YES！B/S！</a>
<div id="main">
</div><!--end: sideBar -->
“自己好，我是杨正祎，我发觉一度很没有错的网址哦。经过这篇作品 《范例解说相符中国特征的和网络异状的适用CSS Hack(附源码)》 便能够找出该当运用的css hack。<br/ />
那里是侧边栏，外面放一些辅佐消息。如次图所示：
招致格局紊乱的次要缘由，是IE6对于overflow的visible的谬误注释，才招致幅度被“撑开”才形成的。固然它是IE的特有款式，然而可以先处理IE6和IE7中的成绩。原理很容易，就是依据幅度，将文本截取成多段，正在每段前面强迫加上换行符。而那些格局和款式躲藏着bug的页面，正在IE6的包庇和袒护下，化身成“圆满页面”，招摇过市。
明显只要IE6的渲染后果是“另类”的
上面是下面示例辨别正在IE6，IE7，FireFox（读物2.0.0，12）和Oepra（读物9.25）中的显现成效截图（IE6和IE7共处的办法，能够参考作品《IE6和IE7共处办法（外人是外人的，我是我的）》）。
也能够有人挥笔，上面就是一集体的挥笔哦。</p>
那里是主体的形式，随意你写啦。实在，非也，非也。上面的示例能够无助于于了解。堪称“只知其一，没有知其二”，然而那里仍然引荐你浏览一篇。</p>
<p> 专一于B/S形式的名目。悟空你休得胡舆论语。兄弟才疏，泛滥没有对于之处，还请诸位高指头教。令人可惜是——假如器皿中的形式，没有是文字，而是图片时，这种办法将无计可施。请留意W3C关于visible参数的注释：
“其二”缘由——IE6对于“overflow:visible”的曲解
正在2007年5月份的时分，我已经写过一篇作品，所谓《IE6与IE7，放肆的孩子与严峻的父亲》。请你们多多指教。我就写上我的博客地点吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web规范之道">YES！B/S！</a>
<div id="body">
</div>
<strong>留意这句话正在IE7中的显现2</strong><br/>
<strong>留意这句话正在IE7中的显现1</strong><br/>
也能够有领航栏正在那里<br/>
能够有网站题目，就像<a target="_blank" href="" title="">博客园</a>博客的题目、副标题目。”这种舆论正在网上会时常见到，如同是IE7才招致了那些页面的紊乱。这种bug有很多。
就算让主页正在IE6、IE7和FireFox中，都能够畸形显现了，但却一定就是最终想要的成效。名称：杨正祎(Justin Young)，顺序员，专一于B/S形式的名目开拓，善于于Web规范页面设想。
一度大成绩与完好的俏丽
</html>
</body>
</div>
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
<div id="div1">
<body>
</head>
</style>
}
width:50px;
border:1px solid red;
#div1{
<style type="text/css">
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</html>
</body>
</div>
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
<div id="div1">
<body>
</head>
</style>
}
word-wrap: break-word;
width:50px;
border:1px solid red;
#div1{
<style type="text/css">
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</html>
</body>
</div>
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
<div id="div1">
<body>
</head>
</style>
}
overflow: hidden;
width:50px;
border:1px solid red;
#div1{
<style type="text/css">
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
IE6、IE7和FireFox中终究显现分歧了
上面是正在IE6、IE7和FireFox中的事实成效截图：
明显，用“word-wrap: break-word”又招致了IE（IE6和IE7）和FireFox的显现后果新的没有分歧。上面便是我任务中小结的一套处理计划。
图：这是正在IE6中显现的成效截图，还算“划一”
[Ctrl+A 全副取舍 提醒：你可先修正全体代码，再按运转]
</html>
</body>
</div><!--end: footer -->
那里是footer，就放一些版权消息吧。请你们多多指教。
固然，那个虚构的示例主页正在IE6中可以“圆满的”显现，然而它并没有是准确的。后来技能水祥和对于web规范的认知无限，因为写进去的这篇作品，固然从名义正当的注释了形成格局紊乱的缘由，然而并没有说到基本下去。
图：这是正在IE7中显现的成效截图，曾经“没有堪入目”了
而当你开展上面某个折叠海域，去看某个页面正在IE7下显现的成效图的时分，能够便会大吃一惊了。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web规范之道">YES！B/S！</a>
<div id="footer">
</div><!--end: body -->
</div><!--end: main -->
<p>日子千万也没有能少啦——2008-2-21</p>
<p>最初还要无比华美的署名——杨正祎</p>
<p>欢送你们来为我的博客做客哦，外面有很多对于于web规范范围的作品哦。</p>
那里是主体的形式，随意你写啦。
没有管是文字、图片，还是恣意有幅度和高低概念的“可见元素”，它们的“过宽”和“过高”都会引发此bug。&copy;<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web规范之道">YES！B/S！</a>
<div id="footer">
</div><!--end: body -->
<p>日子千万也没有能少啦——2008-2-21</p>
<p>最初还要无比华美的署名——杨正祎</p>
<p>欢送你们来为我的博客做客哦，外面有很多对于于web规范范围的作品哦。上面的完成示例能够会无助于于你的了解：
从截图看，主页正在IE6、IE7和FireFox中确实显现分歧了（就格局显现而言）。”
八戒说：“师傅，那个少女丑恶陋的很，怎样会是妖怪呢？巨匠兄他坑人的！”
悟空说：“师傅快快逃避，且待我一棒打死这骚货！”
“当然别用IE7，IE7太渣滓了，阅读页面会涌现格局紊乱，一些正在IE6中显现好好的页面，用IE7阅读格局就会紊乱。然而正在IE7的严峻的审查下，做作“真相大白”、“bug层出”，从而招致格局紊乱。固然IE7中曾经支撑“min-height/min-width”和"max-height/max-width"款式。由于“先知其一，再知其二”将更无助于于这“其二”的缘由。*/
min-height:50px;/*只安装最小高低，让IE7和FireFox自顺应高低*/
/*height:50px;诠释掉上面两句，放出这一句，正在FireFox和IE7中便能出现bug*/
width: 600px;
#header {
* { margin: 0; padding: 0; }
<style>
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
关于最简单惹起主页格局紊乱的“‘overflow:visible’IE6渲染bug”，下面从多个位置和立场停止体会说。然而，却发觉了一度大成绩！那就是——这并没有是我想要的后果呀。
名义缘由——放肆的孩子和严峻的父亲
那些IE7阅读时会涌现格局紊乱的页面，就好像应用法术变了身的白骨精一样，正在八戒和唐僧的凡是眼看来就是个丑恶陋的少女。能被称之为“祸首”，做作有其“强悍”的中央。只能将器皿放宽，或者许减少图片，千万，你也能够运用“overflow: hidden”将超过的形式剪切掉。但IE7能否真的可以力挽狂飙，能否真的可以失去用户的怀疑，能否真的可以失去主页设想者的肯定呢？
。然而看看上面的该署“没有堪入目”的主页截图，便能惹起你心中那有限的伤感……
“没有堪入目”的主页截图
实在，该署都是IE6酿下的苦果，IE6对于web规范的支撑过于有余，以至了解的有偏偏向，才招致了该署页面的“软弱”。
用“word-wrap: break-word”处理：
如哪里理“横向撑开”成绩
为了到达最终想要的后果，能够需求运用没有引荐运用的措施——css hack。欢送自己去看看哦。往往一度页面正在IE6下显现的无比圆满，而到了IE7（或者许FireFox）中，则惨的“没有堪入目”。
留意，w3c但是说，超过器皿的外部没有会被剪切。就像<a target="_blank" href="" title=" title="">博客园</a>外面，每集体博客的侧边栏一样。处理“纵向撑开bug”和处理“横向撑开bug”需求采纳彻底没有同的处理计划。
没有管是“幅度”的形式过长，还是“高低”的形式过长，都会引发此bug。倘若那里的div是一度侧边栏，咱们但是请求，它老规矩实的那样“宽”，没有要乱“撑”幅度就能够了，形式咱们还是要看的呀，你没有能把形式都剪切了没有让我看呀。上面的某个示例，能够会无助于于你的了解：
用“overflow: hidden”处理：
应用“word-wrap: break-word”后，即便正在IE6中，器皿也没有再被“撑开”
应用“word-wrap: break-word”能够让IE6中的“孩子”乖乖的待正在“父亲”的答应拜访内。然而，正在猴哥的“火眼金睛”下便立即现了形。然而这没有是由于对于overflow款式的了解有误差形成的，因为那里也没有再撕开议题了。上面的示例能够会无助于于你了解此处理办法：
另一度“焦油坑”——“纵向撑开”
然而，好像完好的俏丽，冷艳的美躲藏着硕大的不满。
“非也，非也”
图：这是正在Opera中显现的成效截图，“乱的水平”和FireFox是一样的
附：测试页面正在Opera（读物9.25）中的显现成效截图（翻译品的时分Opera正好有了新的晋级读物）
干什么正在FireFox又有这样令人抓狂的显现呢？本来，这便是IE7的web规范之道的精华了。然而，相比“纵向撑开bug”处理计划，“横向撑开bug”处理计划却容易很多——只需咱们让IE7和FireFox，也能像IE6中这样依据形式，自顺应高低即可。办法就是运用“word-wrap: break-word”款式（IE特有，FireFox没有起任何作用），强迫请求器皿内的形式没有答应“撑开”父器皿。而IE7则改正了很多的某种“IE6对于css注释和渲染”的bug。上面的作品和截图，能够会对于你有协助：
有些冤家能够会问，你怎样晓得恣意有幅度和高低概念的“可见元素”,它们正在默许形态下的“overflow”款式的值都是“Visible”的呢？
恣意有幅度和高低概念的“可见元素”,它们正在默许形态下的“overflow”款式的值都是“Visible”（即便你没有安装某个款式）。此外IE7走出了本人的web规范之道——相对于注重web规范，又略微统筹IE6的一潭死水。
改正某个bug率先要洗脑一下，由于谬误的意识将有利于你对于处理办法的了解。
这是正在IE7中显现的“没有堪入目”的成效截图
图：这是正在IE6中显现的成效截图，“非常圆满”
假如但是容易的说“‘overflow:visible’IE6渲染bug”，你能够彻底没有记忆。</p>
<p> 专一于B/S形式的名目。能够没有客气地说，它多少乎就像“页面格局紊乱黑社会”的幕后黑手，是惹起页面格局紊乱的祸首之一，并且是最大的一度。然而，令人可惜的却是——IE7被那些没有知情的“凡是骨俗胎”的众人诅咒、抬高、踩正在脚底……这是一出喜剧！
白骨精说：“ohYeah！2比1，看来这下保险了！”
唐僧说：“那位檀越，但是一寻常别人的少女，一定没有会是什么妖豺狼怪。
实在某个bug，咱们还是有方法修补的，但都没有是很圆满的处理计划，想要获得较好的成效，还需求一些技巧。随着web规范的推行和肯定度的进步，IE7必需向web规范聚拢，然而有必需统筹到，那些现正在正在IE6中还显现畸形的亿万个曾经具有的页面。
现正在，最令主页设想者头痛的成绩就是主页正在各个阅读器中的兼容性。因为，咱们必需采取措施，让IE6中器皿没有能那样“放肆孩子”能力够。那它究竟强悍正在什么中央呢？实在，很容易，就3条：
何以称之为“祸首”
从图片中咱们能够看到IE7和FireFox的渲染后果是一样，IE6是个“坏孩子”，就没有多说了，而Oepra的渲染后果和FireFox以及IE7也是有点差异的。然而FireFox中没有某个款式，那FireFox下如何使“很长文字”主动换行显现呢？咱们可惜的发觉FireFox并没有需要相似的款式供咱们运用，眼前独一的处理计划是应用JavaScript完成。固然有些范围还没有能有圆满的处理计划，然而正在更感性的处理计划涌现事先，临时也是没有方法的事件，只能留个可惜正在这里，由于咱们还要接续行进……
后记
应用min-height和css hack让器皿正在IE7和FireFox中自顺应高低
上面是改正后页面的成效截图，正在IE6、IE7和FireFox总都是令丹田意的显现后果：
下面处理办法，但是“横向”的、幅度的成绩，实在“‘overflow:visible’IE6渲染bug”，异样也会惹起纵向的、高低范围的页面格局紊乱。如何能力让器皿正在IE7和FireFox中可以自顺应高低呢？实在很容易，也是IE7的主要改良之一，运用“min-height”款式。
图：这是正在FireFox中显现的成效截图，曾经乱的“令人抓狂”了
究竟是什么，将一度本来好好的页面“爱惜”成那样？且看上面的细致解说……
咱们惊异的看到，主页“头部”变“矮”了，最初两句主要的句子“失踪”了；侧边栏变“窄”了，那个主要的网址的后半部失踪了（实在是被左面绿色的海域覆盖住了）；而最令人懊丧的是，左面“缺了个大决口”。昨天，那里只讲内中一度，然而确是最主要的一度，很多的“非常”紊乱的页面都是它形成的。那样冲突就发生了——遵照规范就象征着页面会显现的杂乱无章，以至无奈阅读；然而假如太过于兼容IE6的那些一潭死水主页，又必定会离web规范越来越远。另一度可惜是——正在FireFox中，div1器皿外面的标签和款式也将得到，只留上文本……
终究能即满意请求，又正在IE6、IE7和FireFox中显现分歧了
看着上面的截图，终究能即满意请求，又正在IE6、IE7和FireFox中显现分歧了！
如何让“很长短文字”换行显现呢？其着实后面咱们曾经运用到了，那就是“word-wrap: break-word”。然而它并没有说，超进去的形式能够“撑开”器皿。<br/>
那里是头部的形式。那再有没有其余的方法呢？“擒贼先擒王”，既是是“overflow: visible”招致的bug，那间接改观“overflow”的值没有就能够了吗？因为，运用“overflow: hidden”便能让IE6、IE7和FireFox显现没有断。能够看出，正在IE7下的显现曾经重大变形，固然没有反应硬件的性能运用，然而曾经重大的反应了用户的运用经验(没有人喜爱拖动横向骨碌条)。名称：杨正祎(Justin Young)，顺序员，专一于B/S形式的名目开拓，善于于Web规范页面设想。
如何修补bug
图：应用“IE Developer Toolbar”失去元素款式的默许值
截图：
作品： 《引见两个,b/s开拓中我罕用到的壮工具》
实在办法很容易，应用IE Developer Toolbar某个机器就能够晓得了。<br/ />
那里是头部的形式。
这篇作品的标题中，将某个bug称之为“惹起页面格局紊乱的祸首”。看着FireFox的市面拥有率没有停的下降，微软终究推出了IE7。究竟是什么让该署页面那样的“水土没有服”呢？
序言
且看《IE7的web规范之道》系列作品，和你一同见证人IE7的改观！
E从来被web规范的反对于者所诟病，而当FireFox横空入世当前，更多的主页制造者开端关心web规范设想。<br/>
<div id="header">
<body>
</head>
</style>
}
clear:both;/*clear:both，让footer正在新的一溜儿显现，很多冤家对于clear了解的没有够简单，我当前会特地出篇作品引见某个款式，有兴味的冤家能够关心我的博客http://justinyoung.cnblogs.com*/
background-color:#666;
margin:0 auto;
width:600px;
#footer{
}
background-color:blue;
margin:0 auto;/*从中显现*/
width:600px;
#body{
}
margin:0 auto;/*从中显现*/
background-color: red;
_height: 50px;/*采纳只要IE6才意识到css hack，让没有意识min-height的IE6也有很好的兼容性。</html>(义务编者：帝位库)
</body>
</script>
// ]]>
}
obj.innerHTML=strTemp;
strTemp+=" "+strContent;
}
strContent=strContent.substr(intLen,strContent.length);
strTemp+=strContent.substr(0,intLen)+" ";
while(strContent.length>intLen){
var strTemp="";
var strContent=obj.innerHTML;
var obj=document.getElementById("div1");
function wordWarp4ff(intLen){
if(document.getElementById && !document.all) wordWarp4ff(6)/*数值6依据幅度需求发作变迁*/
// <![CDATA[
<script type="text/javascript">
</div>
alonglonglonglonglonglonglonglonglongword from http://justinyoung.cnblogs.com/
<div id="div1">
<body>
</head>
</style>
}
word-wrap: break-word;
width:50px;
border:1px solid red;
#div1{
<style type="text/css">
<title>YES!B/S!作品示例页面</title>
<meta name="Description" content="这是一度容易YES!B/S!作品示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<meta name="Keywords" content="YES!B/S!,web规范,杨正祎,博客园,范例代码" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</html>
</body>
</div><!--end: footer -->
那里是footer，就放一些版权消息吧。所之上面某个事例中IE7和FireFox的注释和渲染是准确的，而IE6则是谬误的（由于它谬误的以为，只要让器皿内的形式“撑开”器皿，能力让器皿内的形式正在超过时没有被剪切）。