6-综合排版-浏览器兼容性

排版前的准备工作

• 分析并画出大概草图模块
• 网页的背景色、背景图
• 网站主页的宽度
• 将当前网页图片放到当前网页的images文件夹中
• 创建CSS文件，并将该CSS文件引入到当前的HTML文件中
  • CSS文件：
  • 1、全局CSS样式设置
    • 一般是去内外填充，如：body,ul,li,h4,a{margin:0px;padding:0px;}
    • 去黑点，如：ul,li,ol{list-style:none;}
    • 链接设置，如：a:link,a:visited{color:#444;text-decoration:none;}    a:hover{color:red;}
    • img去边框，如：img{border:0px}
    • 整体文本设置，如：body{font-size：12px；font-family：宋体；color：#444；background：#ccc url(../images/xx.png) repeat-x}
    • 最大盒子设置，如：.box{width：1000px;height：500px；border：1px solid red;margin:0px auto}
  • 2、具体CSS样式设置
• 技巧：
  • 设置边框{border：1px solid blue}
  • line-height设置与height相等，就有居中效果
  • 设置填充时，一般加多少，width就减多少（背景平铺情况下）
  • 行内元素设置宽高没效果，可以使用display属性，将行内元素改为块元素
  • div（块元素）和span（行内元素）使用最频繁
  • 一个class属性，可以写多个类名，类名之间用空格隔开，方便设置不同样式

浏览器兼容性简介

一个网页在不同的浏览器下，显示的效果可能不一致，就是所谓的“不兼容”。

兼容性调试，主要调试IE8、IE7、IE6、Firefox，版本越高兼容越好

IE浏览器的调试工具：IETester

兼容性一般从三个方面考虑

• 全局CSS设置（同上CSS）
  • 清除所有的标记的内外边距
  • 去除项目符号或编号前面的符号
  • 全局链接效果
  • 网页中所有文字大小颜色，一般给body设置，会被子元素继承
  • 去除图片的链接边框线
  • 全局的类样式，.clear{clear:both;}
• 常用兼容性技巧
  • 实现所有浏览器主页居中
    • Firefox下主页居中代码：.box{margin:0px auto;}
    • IE5.5下主页居中代码：body{text-align:center;}
    • 合并代码书写：body{text-align:center;}/*会改变文本对齐方式*/  .box{margin:0px auto;text-align:left;}/*恢复被修改的对齐*/
  • 单行文本上下居中，设置line-height和height相等
  • 左右margin会加倍（IE6下），应该是IE6下的一个bug
    • 解决方案：使用display：inline。将其转为行内元素
    • 排版时，能使用padding解决的，坚决不用margin。如果必须的用，就使用其中一边。
• CSS HACK
  • 针对不同的浏览器，书写不同的我CSS代码的过程，称为“CSS hack”。
  • 也就是说：写一个CSS代码，让IE6识别，其他浏览器不识别。
  • 针对不同浏览器，有几个符号，这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本
    • “ * ”IE6和IE7识别，如：.box{*background-color:red;}
    • “ _ ”只有IE6识别
  • CSSHACK的编写顺序：Firefox———IE7———IE6
  • 可以使用CSSHACK解决左右margin加倍问题
  • 注意：CSSHACK不是W3C的标准，因此，尽量少用。如果调试兼容性，没有办法时，可以偶尔用一下。