css兼容性处理要点.pptVIP

CSS兼容性 信息工程学院 常艳芬 教学提纲 3.1 复习+引入 （15分钟） 3.2 兼容性问题的由来（了解-5分钟） 3.3 处理兼容性基本的方法（重点-25分钟） 3.4 常见兼容性问题的处理（重难点-40分钟） 3.5 总结（5分钟） 3.1复习 3.2兼容器性问题的由来 3.3处理兼容性基本方法 3.3处理兼容性基本方法 3.3总结 3.4常见兼容性问题的处理方法 3.5总结 3.6 作业 * * * * * * * * * * * * * 教学内容 1 浮动被流动包含问题 2 包含框不能自适应高度的问题 3 浮动布局中栏目内容被隐藏的问题 4 同时设置边界和浮动布局的问题 5 半个像素问题 6 3像素问题 7 多出字符问题 3.4.2 浮动布局的兼容性处理 1 浮动被流动包含问题 这是所有浏览器都存在的问题，即当一个自然流到的元素包含一个浮动的元素时，则包含元素会自动收缩，而不是被浮动元素撑开。既然所有浏览器都有这个问题，那么法不责众，这个问题也就算不上问题了，或者说它仅是一种现象。 3-31.html 解决方法： 可以使用增加清除浮动元素，强制包含框张开以包含浮动的子元素。 3-32.html 1 浮动被流动包含问题 但是如果在IE 6及其以下版本中不完全支持这种方法。而更有趣的是，如果在IE 7浏览器中改变窗口宽度小于包含的浮动元素所定义的宽度时，你会发现包含框所定义的背景色突然没有了，真是让人莫名其妙。 方法： #wrap { /* 包含框样式 */ background:#FFCCFF; zoom:1; /* 使用私有属性缩放100%来触发布局 */ } 或者： #wrap { /* 包含框样式 */ background:#FFCCFF; border:solid 1px red; /* 定义边框来触发布局 */ } 3-33.html、3-34.html 2 包含框不能自适应高度的问题 这个现象本应属于流动布局问题，因为与上一节示例存在问题有点类似，故放在这儿进行讲解。该问题存在于所有浏览器中。当为包含框内的元素定义上下边界时，包含框不能够自适应高度以包含子对象。 3-35.html 存在原因： 如果嵌套元素的边界没有被相互阻隔，则就会出现边界重叠现象。例如，被包含元素的上边界会自动与包含框的上边界重叠，被包含元素的下边界会自动与包含框的下边界重叠。 解决方法： 为包含框定义边框或者补白，从而阻断相互嵌套元素的上下边界接触，防止发生重叠现象，则阻断边界接触。 3-36.html、3-37.html 3 浮动布局中栏目内容被隐藏的问题 这个问题存在于IE 6及其以下版本浏览器中。有人把这个问题称之为躲猫猫或捉迷藏。之所以这样称呼，是因为在特定条件下栏目内容看起来消失了，只有重新刷新页面时才能够出现，或者用鼠标拖选可以使其显示。 3-38.html 3 浮动布局中栏目内容被隐藏的问题 出现这个Bug的原因比较特殊，一般需要几个前提条件： 第一，包含框中包含有浮动元素和流动元素，且包含框定义了背景色。 第二，浮动元素后面为一些流动元素，浮动元素的高度应该大于后面流动元素的高度。 第三，在流动元素的下面是一个清除元素（即元素定义清除浮动属性），或者是一个被定义了宽度且宽度足以促使元素只能够显示在浮动元素的底部，而不是环绕在浮动元素的两侧。 当满足上面三个条件，则中间的流动元素（环绕在浮动元素两侧的元素）看起来似乎消失了，原来它们都隐藏到了父元素的背景后面，只有在刷新页面时才重新出现。 3 浮动布局中栏目内容被隐藏的问题 方法一，学会在浮动元素后面增加清除元素。所谓清除元素，就是定义了clearr属性的元素，这样就可以避免浮动元素对后面布局的影响。 方法二，在结构嵌套中应遵循最少的层次来满足页面设计需要，使页面结构简单，容易控制与管理，尽可能的减小由于不必要的嵌套引来的Bug。 3-39.html 4 同时设置边界和浮动布局的问题 这个问题存在于IE 6及其以下版本浏览器中。出现这个问题需要具备两个前提条件： 第一，元素同时被定义了边界和浮动显示，且浮动方向和定义边界方向在一个方向。 第二，浮动边相邻的是一个流动元素或包含框，而不是浮动元素。 当满足这两个条件之后，所定义的边界会加倍显示。 3-40.html 3-41.html 解决该问题方法比较简单： 3-42.html 5 半个像素问题 这个问题存在于所有IE浏览