CSS+div页面布局的总结

Filed Under (DIV+CSS样式) by 有为 on 30-11-2011

常见错误

1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

IE6,IE7,FireFox中overflow:visible不兼容问题的解决

Filed Under (DIV+CSS样式) by 有为 on 13-04-2009

在IE6,IE7,FireFox中“‘overflow:visible’IE6渲染bug”,会引起纵向的、高度方面的页面布局混乱。解决“纵向撑开bug”和解决“横向撑开bug”需要采用完全不同的解决方案。但是,相比“纵向撑开bug”解决方案,“横向撑开bug”解决方案却简单很多。
这里只给出“纵向撑开bug”解决方案,如何才能让容器在IE7和FireFox中能够自适应高度呢?其实很简单,也是IE7的重要改进之一,使用“min-height”样式。虽然IE7中已经支持“min-height/min- width”和”max-height/max-width”样式。但是IE6却不认识这些”min-”、”max-”开头的样式,所以,我们还需要使用一个css hack为IE6设置一个“height”,只让IE6认识,IE7和FireFox都不认识,例如下面代码。
.l_list{width:620px; _height:497px; min-height:497px; border:1px #bdd2ed solid; float:left; display:inline; margin-top:4px;margin-right:10px;background-color:#FFFFFF;}

height:50px;如果使用这一句,在FireFox和IE7中便能呈现bug
min-height:50px;只设置最小高度,让IE7和FireFox自适应高度
_height: 50px;采用只有IE6才认识到css hack,让不认识min-height的IE6也有很好的兼容性。

ASP.NET控件textbox的样式overflow:visible在IE6和IE7不兼容的解决

Filed Under (DIV+CSS样式) by 有为 on 13-04-2009

现在,最令网页设计者头痛的问题就是网页在各个浏览器中的兼容性。而兼容性差最长见的,也是最令人恐惧的便是“页面布局混乱”。常常一个页面在IE6下显 示的非常完美,而到了IE7(或者FireFox)中,则惨的“不堪入目”。到底是什么让这些页面那么的“水土不服”呢?

其实,这些都是IE6酿下的恶果,IE6对web标准的支持过于不足,甚至理解的有偏差,才导致了这些页面的“脆弱”。而IE7则修正了很多的那种 “IE6对css解释和渲染”的bug。这种bug有很多。今天,这里只讲其中一个,但是确是最重要的一个,很多的“十分”混乱的页面都是它造成的。可以 不客气地说,它简直就像“页面布局混乱黑帮”的幕后黑手,是引起页面布局混乱的祸首之一,而且是最大的一个。 它就是潜伏在网页背后的“‘overflow:visible’IE6渲染bug”。

原因——IE6对“overflow:visible”的误解

Visible: “This value indicates that content is not clipped, i.e.,it may be rendered outside the block box(注:后面这句可能是后续版本补充上来的)”.

注意,w3c只是说,超出容器的内部不会被剪切。但是它并没有说,超出来的内容可以“撑开”容器。所以下面这个例子中IE7的解释和渲染是正确的,而 IE6则是错误的(因为它错误的认为,只有让容器内的内容“撑开”容器,才能让容器内的内容在超出时不被剪切),IE7和FireFox是一样的。

解决方法

大家知道IE有两种渲染模式:Quirks Mode和Strict Mode。Quirks Mode基本上是非标准的,包括盒模型在内,它的渲染方式与W3C的标准有些出入。而Strick Mode基本上是标准的(反正都不是绝对标准也不是绝对不标准……)。IE6及以前版本会根据写在XHTML文档第一行(也只能是第一行)的 DocType声明来选择渲染模式。如果发现了一个它能识别的DocType,比如XHTML Transitional或者XHTML Strict等等,它就使用Strict Mode来渲染。其他所有情况下都使用Quirks Mode。

有些开发者为了显式地声明他们的XHTML文档是一个XML,会在文档的第一行(问题就在这里,它也必须在第一行)加上XML的序言(prolog)。比如:

<?xml version=”1.0″ encoding=”gb2312″?>

虽然初衷是为了让文档更“标准”,但由于IE不认这行字,结果还是按Quirks Mode来渲染。

IE7 解决这个问题,它会跳过prolog来看检查DocType。所以可能会出现IE6及以下版本用Quirks Mode渲染而IE7 用Strict Mode渲染的情况。

现在让IE7渲染textbox的模式是Quirks Mode,这样textbox的overflow:visible属性就可以像IE6效果一样了,所以只要把XHTML文档第一行的DocType声明删除就可以了。

这样问题就解决了。。。

注意:虽然在IE7和IE6中显示一样的,但是在FF中还是不一样,所以这种方法只能解决IE7中的问题,FF中的是无能为力的。