《HTML CSS JavaScript网页制作三合一案例教程》教学课件 08第八章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健;第八章 CSS与浏览器兼容问题;;案例一 无序列表的兼容性;无序列表兼容性的解决方法很简单，就是不使用默认的列表符号。具体做法为：首先将list-style-type的属性值设置为none，然后再设置list-style-image或者为list加上带有小点的背景图像。此外，在两个不同的浏览器中，区别最大的地方在于，如果我们为列表项li加上属性list-style-type:hiragana;，在不同的浏览器中显示的结果如图8-2所示。;案例二 浮动在IE下产生的双倍距离;为上述页面中的div添加对应的??式代码，设置各div的高度、宽度等，并使用float属性使3个子div横向平铺，CSS代码如下：;保存此代码，先在火狐浏览器中浏览，效果如图8-3所示。可以看出，在火狐浏览器中看到的页面效果与设置的效果一致，体现在以下几方面：;我们看到在IE 6浏览器下，最左边产生了双倍的距离，这是IE 6的一个BUG，在IE 8中已经解决。大家也许会说，有BUG简单嘛，直接用IE 8、IE 9就好了。但是我们在制作网页时，必须考虑到有些用户的浏览器还是用的IE 6甚至是IE 5.5。在IE 6中，这个双倍距离的BUG会在页面布局中产生很多问题，因为在我们的设计器（Dreamweaver）中，显示效果是没有双倍距离的。图8-5显示了上述页面在Dreamweaver设计界面中的效果。;IE 6对此有对应的解决办法，即在要浮动的div样式中加上display:inline;这样一段代码，此样式的作用是使块元素显示为行内元素，可解决IE 6的双倍显示问题。修改box的CSS样式如下：;案例三 在IE 6中图片下方有空隙产生;这样的结果是由于IE 6对图片CSS样式的解释和其他版本的浏览器不同。要避免此问题，只需为img标签设置一个CSS样式即可，如下代码所示：;案例四 3像素问题;对应的CSS代码如下：;由图8-13可以看出，在IE 6中，两个div之间产生了3px的间距，这样就很容易导致后面的元素错位。解决方法：为两个div分别加上float:left;属性，并取消右侧div中的margin-left属性，这样后面的div也会跟着向左浮动。但这样需要为后面不需要向左浮动的div添加clear:left;属性，以清除其向左浮动属性。;案例五 浏览器不能自适应高度;CSS代码如下：;很显然，我们想要的结果也没有出现。接着在IE 6中查看，效果居然实现了，如图8-17所示。在其他版本浏览器中仍然不能自适应高度。这个问题如何解决呢？我们可以试着在外层的div里再加上一个div，并为其添加清除左浮动和高度属性，设置其高度为1像素。此时的HTML代码如下所示：;为添加的div（id为clear）添加CSS样式，清除左浮动和高度属性，其代码如下所示：;图8-19 在IE 6中的最终效果;案例六 margin值加倍问题;CSS代码如下：;对于以上问题，我们可以非常容易地解决。为第一个浮动元素的样式增加属性display:inline;（行内显示）即可。;保存样式后，再来看看在IE 6中的效果，如图8-22所示。;一、浏览器兼容性介绍;出现浏览器兼容性问题的原因有多种，最常见的是不同浏览器所用内核及所支持的HTML等网页语言标准不同，还有一种可能是用户客户端环境不同，如分辨率不同。;;二、解决浏览器兼容性问题的小技巧;（2）关于网页居中的问题，IE默认使用text-align属性，值为center；火狐默认使用margin属性，左右边界值为auto。（3）在定义列表项或行文本的高度时，尽量避免使用height，而是用line-height属性间接定义。（4）不出现显示错误的大前提是一定要注意标签正确且完整嵌套。比如dldt/dtdd/dd/dl中的dt不能单独存在，它必须依附在dl里面。（5）为每个标签完善属性。正是由于浏览器有默认值，为标签写属性的同时，相当于重新定义了默认值，所以可避免一些兼容性问题。;Thank you！