css布局差别.docVIP

Chrome浏览器和火狐浏览器FF 1、浏览器会默认有10px的间距，所以需要在.body类上设置外边距margin=opx，防治其他浏览器上设置没效果就会设置内边距padding:0px。 2、IE指定的最小高度为18px，在IE中设置10px以内会按照18px。解决办法是，用overflow:溢出，设置属性值为hidden 隐藏溢出部分。 3、IE上必须添加!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”/TR/xhtml1/DTD/xhtml1- transitional.dtd”使页面编辑能保持一直，通常在Dreamwaver中是默认添加的。IE添加overflow前Chrome IE添加后 4、IE会自动调整高度，而FF不会，指定多高就是多高，FF在不设定高度的时候可以自动调整高度。 5、IE和FF在列表上区别，IE上有外边距，无序列表ulli标签中有序标签li有边距，而FF没有。通常解决办法是在IE的ul所定义的样式上添加： {margin:0px;padding:0px;list-style:none;} 附： DTD是文档类型定义，用Dreamwaver工具创建，DTD会默认出来，如!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”，开头的html指的是 文档类型的标签，最外层标签。Public指文档公开，W3C是那个组织发布的DTD文件，xhtml 1.0是DTD版本，Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”是 DTD文件的地址，URL地址，加DTD会让页面排版的更整齐，不过不加也可以调整。 div+css网页布局在各个浏览器之间的差异 1、 IE6、IE7、Firefox之间的兼容写法： 写法一： IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;根据上述表达，同一类/ID下的CSS 　hack可写为：.searchInput {background-color:#333;/*三者皆可*/*background-color:#666　!important; /*仅IE7*/*background-color:#999; /*仅IE6及IE6以下*/}一般三者的书写顺序为：FF、IE7、IE6. 写法二： IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：.searchInput {background-color:#333;/*通用*/_background-color:#666;/*仅IE6可识别*/} 写法三： *+html 与 *html 是IE特有的标签, Firefox 暂不支持。.searchInput {background-color:#333;}*html .searchInput {background-color:#666;}/*仅IE6*/*+html .searchInput {background-color:#555;}/*仅IE7*/ 屏蔽IE浏览器： select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 *:lang(zh) select {font:12px? !important;} /*FF的专用*/select:empty {font:12px? !important;} /*safari可见*/ IE6可识别： 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 select { display /*IE6不识别*/:none;} IE的if条件hack写法： 所有的IE可识别： !–[if IE] Only IE ![end if]–只有IE5.0可以识别:!–[if IE 5.0] Only IE 5.0 ![end if]–IE5.0包换IE5.5都可以识别:!–[if gt IE 5.0] Only IE 5.0+ ![end if]–仅IE6可识别:!–[if lt IE 6] Only IE 6- ![end if]–IE6以及IE6以下的IE5.x都可识别:!–[if gte IE 6] Only IE 6/+ ![end if]–仅IE7可识别:!–[if lt