2023年6月21日发(作者：)

ａ叶技２０１２年第２５卷第８期　Ｅｌｅｃｔｒｏｎｉｃ　Ｓｃｉ．＆Ｔｅｅｈ．／Ａｕｇ．１５．２０１２　ＣＳＳ浏览器兼容性问题研究　宋玉伟，李隐峰，齐　鹏　（西安电子科技大学电子工程学院，陕西西安摘要７１００７１）　针对层叠样式表浏览器兼容问题，文中分别从浏览器、兼容问题解决技巧和ＣＳＳ调试３个方面入手。首　先介绍常用浏览器；接着列出常见ＣＳＳ浏览器兼容问题，并给出了解决方法；最后介绍两种界面设计者常用的检验工　具：ＩＥＴｅｓｔｅｒ和Ｆｉｒｅｆｕｇ。　关键词ＣＳＳ；浏览器；兼容性；１ＥＴｅｓｔｅｒ；Ｆｉｒｅｆｕｇ　ＴＰ３９３．０９２　文献标识码Ａ　文章编号１００７—７８２０（２０１２）０８—１４７—０３　中图分类号Ｓｔｕｄｙ　ｏｎ　Ｂｒｏｗｓｅｒｓ　Ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｏｆ　Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ　ＳＯＮＧ　Ｙｕｗｅｉ，ＬＩ　Ｙｉｎｆｅｎｇ，ＱＩ　Ｐｅｎｇ　（Ｓｃｈｏｏｌ　ｏｆ　Ｅｌｅｃｔｒｏｎｉｃ　Ｅｎｇｉｎｅｅｒｉｎｇ，Ｘｉｄｉａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｘｉ’ａｎ　７１００７１，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ　Ｔｈｉｓ　ｐａｐｅｒ　ａｐｐｒｏａｃｈｅｓ　ｔｈｅ　ｂｒｏｗｓｅｒｓ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍｓ　ｏｆ　ＣＳＳ　ｆｒｏｍ　ｔｈｒｅｅ　ａｓｐｅｃｔｓ：ｂｒｏｗｓｅｒ，ＳＯ—　ｌｕｔｉｏｎ　ｔｏ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍ　ａｎｄ　ＣＳＳ　ｄｅｂｕｇｇｉｎｇ．Ｆｉｒｓｔ　ｉｔ　ｉｎｔｒｏｄｕｃｅｓ　ｃｏｍｍｏｎｌｙ　ｕｓｅｄ　ｂｒｏｗｓｅｒｓ，ａｎｄ　ｔｈｅｎ　ｉｔ　ｅｎｕｍｅｒ－　ａｔｅｓ　ｓｏｍｅ　ＣＳＳ　ｂｒｏｗｓｅｒ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍｓ　ａｎｄ　ｇｉｖｅｓ　ｔｈｅ　ｓｏｌｕｔｉｏｎ．Ｆｉｎａｌｌｙ　ｉｔ　ｐｒｅｓｅｎｔｓ　ｔｗｏ　ｃｏｍｍｏｎ　ｉｎｓｐｅｃｔｉｏｎ　ｔｏｏｌｓ　ｆｏｒ　ＣＳＳ：ＩＥＴｅｓｔｅｒ　ａｎｄ　ｆｉｒｅｆｕｇ．　Ｋｅｙｗｏｒｄｓ　ＣＳＳ；ｂｒｏｗｓｅｒ；ｃｏｍｐａｔｉｂｉｌｉｔｙ；ＩＥＴｅｓｔｅｒ；ｆｉｒｅｆｕｇ　因浏览器开发者对ＣＳＳ国际通用标准Ｗ３Ｃ　（Ｗｏｒｌｄ　Ｗｉｄｅ　Ｗｅｂ　Ｃｏｎｓｏｒｔｉｕｍ）理解不同，而导致同一　Ｔｒａｖｅｌｅｒ）；３６０安全浏览器；搜狗浏览器（Ｓｏｕｇｏｕ　Ｅｘｐｌｏｒｅｒ）等。　（２）Ｍｏｚｉｌｌａ　Ｆｉｒｅｆｏｘ（火狐）浏览器。Ｆｉｒｅｆｏｘ是由　Ｍｏｚｉｌｌａ公司开发的一个开源浏览器，它能够跨多个操　作系统，此外还具有体积小、速度快等优点。这款免费　的开源浏览器也占据着很大的市场份额。　网页在不同的浏览器中呈现不同的效果，即所谓的浏　览器兼容问题。若界面设计者能够周全地考虑兼容问　题，不仅能体现其技术水平，也是对其网站用户负责的　一种态度　。　１　常用浏览器介绍　浏览器是万维网（Ｗｅｂ）服务的客户端浏览程序，　２　ＣＳＳ浏览器兼容性问题分析与解决　（１）各浏览器的内外补丁默认值不同。在网页中　随便写几个标签，如果对其不加任何样式控制，在各种　可向万维网服务器发送各种请求，并对从服务器发来　的超文本信息和各种多媒体数据格式进行解释、显示　和播放。　浏览器下显示的效果就会有较大差别。这是因为各浏　览器ｐａｄｄｉｎｇ和ｍａｒｇｉｎ默认值不同。这是最常见的浏　览器兼容性问题，解决方法就是在ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ，ｃｓｓ）文件开头用通配符　设置各个标签的　几种常用浏览器：　（１）ＩＥ（１ｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ）浏览器。介绍是由　Ｍｉｃｒｏｓｏｆｔ公司开发，因其捆绑在Ｗｉｎｄｏｗｓ系统中，并且　是免费推出，所以占据着绝大部分的市场份额。目前，　ＩＥ浏览器使用较多的版本是ＩＥ６．０、ＩＥ７．０、ＩＥ８．０以及　ＩＥ９．０。以ＩＥ为内核的常见浏览器：世界之窗（Ｔｈｅ　内外补丁为０，即　｛ｍａｒｇｉｎ：０；ｐａｄｄｉｎｇ：０；｝　ｊ。　（２）ｍａｒｇｉｎ加倍的问题。块属性标签被设置ｆｌｏａｔ　后，如果又有横向的ｍａｒｇｉｎ，在ＩＥ６．０中显示的ｍａｒｇｉｎ　值将是设置值的２倍。这是ＩＥ６．０的一个常见ｂｕｇ，是　ｌｆｏａｔ布局中最常见的兼容性问题。解决方法是在ｄｉｖ　标签样式控制中加入ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ；将其转化为行内　属性　。　Ｗｏｒｌｄ）；傲游浏览器（Ｍａｘｔｈｏｎ）；腾讯ＴＦ（Ｔｅｎｃｅｎｔ　收稿日期：２０１２—０２—２１　作者简介：宋玉伟（１９８６一），女，硕士研究生。研究方向：　网络信息处理，Ｗｅｂ信息系统，数据库系统。李隐峰　（１９７４一），男，副教授，硕士生导师。研究方向：Ｗｅｂ信息　例如：＜ｄｉｖ　ｉｄ＝“ｔｅｓｔｌ”＞相应的ＣＳＳ代码为：＃　ｔｅｓｔｌ｛ｆｌｏａｔ：ｌｅｆｔ；ｍａｒｇｉｎ：１０　ｐｘ　０　０　１０　ｐｘ；｝。在不同的　浏览器下显示如图１和图２所示；当样式表中加入　ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ；后，ＩＥ６显示效果如图２所示。　系统，网络安全，计算机网络教学与应用。　ｗｗｗ．ｄｉａｎｚｉｋｅｊｉ．ｏｒａｌ——　１４７　宋玉伟，等：ＣＳＳ浏览器兼容性问题研究　ｍｉｎ—ｈｅｉｇｈｔ：５００　ｐｘ；，但它在ＩＥ６．０浏览器中不能被识　别。解决方法是｛ｍｉｎ—ｈｅｉｇｈｔ：５００　ｐｘ：ｈｅｉｇｈｔ：ａｕｔｏ！　ｉｍｐｏｒｔａｎｔ；ｈｅｉｇｈｔ：１００　ｐｘ；ｏｖｅｒｌｆｏｗ：ｖｉｓｉｂｌｅ；｝　（６）ｄｉｖ的居中问题。如果要让一个具有一定宽　图１　ＩＥ６．０下左边距变为２０　ｐｘ　度的ｄｉｖ（＜ｄｉｖ　ｉｄ：“ｃｏｎｔａｉｎｅｒ”＞…＜／ｄｉｖ＞）在ＩＥ浏　览器中水平居中显示，只需用ｂｏｄｙ｛ｔｅｘｔ—ａｌｉｇｎ：　ｃｅｎｔｅｒ；｝＃ｃｏｎｔａｉｎｅｒ｛ｗｉｄｔｈ：８００　ｐｘ；｝，但这在Ｆｉｒｅｆｏｘ浏　览器下却不能实现。解决方法是将ＣＳＳ代码改为　ｂｏｄｙ｛ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；｝＃ｃｏｎｔａｉｎｅｒ｛ｗｉｄｔｈ：８００　ｐｘ；　ｍａｒｇｉｎ：０　ａｕｔｏ；ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ；｝。　图２　ＩＥ７．０／ＩＥ８．０／ＦＦ下效果　（７）ｕｌ和０ｌ标签的ｐａｄｄｉｎｇ与ｍａｒｇｉｎ问题。ｕｌ和　０ｌ标签在Ｆｉｒｅｆｏｘ浏览器中默认是有ｐａｄｄｉｎｇ值的，而　在ＩＥ浏览器中只有ｍａｒｇｉｎ默认有值。这样只要先定　义ｕｌ（或ｏ１）｛ｍａｒｇｉｎ：０；ｐａｄｄｉｎｇ：Ｏ；｝即可。　（３）无法定义较小高度的容器。在ＩＥ６．０、ＩＥ７．０　及遨游浏览器中，定义较小高度的标签，这个标签的高　度不受控制，超出设置的高度。出现这个问题的原因　是ＩＥ８．０之前的浏览器都会给标签一个最小默认的行　（８）利用ＣＳＳ　Ｈａｃｋ。根据不同的浏览器对ＣＳＳ的　支持及解析结果不同样，ＣＳＳ中的优先级不同，可以对　不同的浏览器写不同的ＣＳＳ，这就是ＣＳＳ　Ｈａｃｋ的工作　原理　一　。　高的高度。即使标签是空的，高度还是会达到默认的　行高。解决方法是给超出高度的标签设置ｏｖｅｒｆｌｏｗ：　ｈｉｄｄｅｎ；或者设置ｌｉｎｅ—ｈｅｉｇｈｔ小于设置的高度。　首先需要了解以下规则：　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／所有浏览器通用　一（４）图片默认有间距。将几个ｉｍｇ标签放在一起　时，由于ｉｍｇ标签属于行内属性的标签，只要不超过容　器宽度，ｉｍｇ标签都会在一行中显示。但在某些浏览器　下图片之间会存在空隙，即使加了通配符　｛ｍａｒｇｉｎ：０；　ｐａｄｄｉｎｇ：０；｝也不起作用。要去掉这个间距应使用ｆｌｏａｔ　属性为ｉｍｇ布局，虽然使用负ｍａｒｇｉｎ也能够解决，但由　于负ｍａｒｇｉｎ本身就很容易引起浏览器兼容性问题，所　以不建议使用。　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／“”ＩＥ６．０浏览器专用　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／“：ｌ：”、ＩＥ６．０、ＩＥ７．０共用，　ＩＥ８．０、ｆｉｒｅｆｏｘ均不能识别　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ　！ｉｍｐｏｒｔａｎｔ；／／“！ｉｍｐｏｒｔａｎｔ”　Ｆｉｒｅｆｏｘ、ＩＥ７．０、ＩＥ８．０浏览器共用　其次，还需了解ＣＳＳ代码的优先级，！ｉｍｐｏｒｔａｎｔ的　优先级最高，行内样式次之，ＩＤ选择器再次之，类选择　（５）标签最小高度ｍｉｎ—ｈｅｉｇｈｔ不兼容。当一个标　器更次之，标签选择器最低。对于优先级相同的按后　出现优先原则。　目前比较全的ＣＳＳ　Ｈａｃｋ浏览器兼容性如表２　所示　。　签的内容高度小于一个值（如５００　ｐｘ）时，这个标签的　高度为５００　ｐｘ。而当内容高度＞５００　ｐｘ时，容器高　度等于内容的高度，而不出现滚动条。这时需要用到　表１　浏览器ＣＳＳ选择器兼容性一览表　ｌ４８　ｗ　ｗ　ｗ　Ｏｉａｎｚｉｋｅｊｉ　ｏｒｏ　宋玉伟，等：ＣＳＳ浏览器兼容性问题研究Ｉ｜葛匿重圈　注：、／表示目前支持；△表示浏览器部分支持当前ＣＳＳ选择器；Ｘ表示浏览器完全不支持。　仅方便了网页的调试，其编辑、挪动区块位置、可视化　３　ＩＥＴｅｓｔｅｒ与Ｆｉｒｅｂｕｇ　（１）ＩＥＴｅｓｔｅｒ。针对ＩＥ浏览器的不同版本，界面设　标尺能够为ＣＳＳ学习者提供有效的帮助。　４　结束语　集中介绍了常用浏览器、ＣＳＳ兼容性问题、解决方　法和两种ＣＳＳ调试工具，并且举例说明网页设计中经　常遇到的ＣＳＳ样式表在不同浏览器下的兼容性问题及　计者均需查看网页的显示效果，若在自己的机器上安装　各种版本的浏览器，较为复杂。ＩＥＴｅｓｔｅｒ是免费软件，是　ＩＥ浏览器兼容性测试工具，它同时包括了ＩＥ　５．５、　ＩＥ６．０、ＩＥ７．０、ＩＥ８．０、ＩＥ９．０的所有内核，可在ＩＥＴｅｓｔｅｒ中　查看不同ＩＥ版本的页面显示效果，以保证测试的页面　可在各版本ＩＥ浏览器中正确显示。　（２）Ｆｉｒｅｂｕｇ。Ｆｉｒｅｂｕｇ是Ｆｉｒｅｆｏｘ浏览器的一个插　件，集网站语言查看与编辑、控制台、网络状况监视器　其解决方法，并总结了浏览器兼容性。　参考文献　［１］张志洁，李书明，赵玲．ＣＳＳ技术在网页设计中的应用探　析［Ｊ］．网络通讯与安全，２００７（１０）：３Ｏ一３６．　［２］　ＲＡＣＨＥＬ　Ａ．ＣＳＳ精粹［Ｍ］．丁卫颖，李奕，吴戈，译．北京：　人民邮电出版社。２００７．　于一体，是开发调试ＪａｖａＳｃｒｉｐｔ、ＣＳＳ、ＨＴＭＬ等网站语　言的助手工具。　瀚　≤　［３］　巩恩伟．ＣＳＳ在浏览器中的兼容性及使用技巧［Ｊ］．电脑　知识与技术，２００９，５（６）：１４１３—１４１４．　［４］　黎亚红，罗藤．ＣＳＳ在不同浏览器中的兼容性问题浅析　［Ｊ］，岳阳职业技术学院院报，２００８，２３（３）：８４—８６．　［５］ＣＢＲＩＳＴＯＰＢＥＲ　Ｓ．ＣＳＳ　Ｃｏｏｋｂｏｏｋ［Ｍ］．陈寒林，译．北京：　电子工业出版社，２００７．　图３　Ｆｉｒｅｂｕｇ界面：ＣＳＳ查看器　这里介绍的Ｆｉｒｅｂｕｇ的ＣＳＳ调试器，查看器能够列　出页面调用的每一个ＣＳＳ样式表：定义位置、详细ＣＳＳ　代码及其从属继承关系。用户可在该查看器中直接添　［６］　Ｂｉｎｇｏ．浏览器／ＣＳＳ选择器兼容性总结［ＥＢ／ＯＬ］．（２０１０　—加、修改、删除ＣＳＳ样式表属性，当前页面即可直接显　示编辑后的页面效果。Ｆｉｒｅｂｕｇ的ＣＳＳ查看器的功能不　１Ｏ—Ｏ４）［２０１２—０１一Ｏ５］ｈｔｔｐ：／／ｂｌｏｇ．ｂｉｎｇｏ９２９．ｃｏｍ／ｅｓｓ　ｂｒｏｗｓｅｒ—ｓｕｐｐｏｒｔ．ｈｔｍ１．　—ＷＷＷ．ｄｉａｔｌｚｉｋＰ￣ｊｉ．０ｒｇ——　１４９　

2023年6月21日发(作者：)

ａ叶技２０１２年第２５卷第８期　Ｅｌｅｃｔｒｏｎｉｃ　Ｓｃｉ．＆Ｔｅｅｈ．／Ａｕｇ．１５．２０１２　ＣＳＳ浏览器兼容性问题研究　宋玉伟，李隐峰，齐　鹏　（西安电子科技大学电子工程学院，陕西西安摘要７１００７１）　针对层叠样式表浏览器兼容问题，文中分别从浏览器、兼容问题解决技巧和ＣＳＳ调试３个方面入手。首　先介绍常用浏览器；接着列出常见ＣＳＳ浏览器兼容问题，并给出了解决方法；最后介绍两种界面设计者常用的检验工　具：ＩＥＴｅｓｔｅｒ和Ｆｉｒｅｆｕｇ。　关键词ＣＳＳ；浏览器；兼容性；１ＥＴｅｓｔｅｒ；Ｆｉｒｅｆｕｇ　ＴＰ３９３．０９２　文献标识码Ａ　文章编号１００７—７８２０（２０１２）０８—１４７—０３　中图分类号Ｓｔｕｄｙ　ｏｎ　Ｂｒｏｗｓｅｒｓ　Ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｏｆ　Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ　ＳＯＮＧ　Ｙｕｗｅｉ，ＬＩ　Ｙｉｎｆｅｎｇ，ＱＩ　Ｐｅｎｇ　（Ｓｃｈｏｏｌ　ｏｆ　Ｅｌｅｃｔｒｏｎｉｃ　Ｅｎｇｉｎｅｅｒｉｎｇ，Ｘｉｄｉａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｘｉ’ａｎ　７１００７１，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ　Ｔｈｉｓ　ｐａｐｅｒ　ａｐｐｒｏａｃｈｅｓ　ｔｈｅ　ｂｒｏｗｓｅｒｓ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍｓ　ｏｆ　ＣＳＳ　ｆｒｏｍ　ｔｈｒｅｅ　ａｓｐｅｃｔｓ：ｂｒｏｗｓｅｒ，ＳＯ—　ｌｕｔｉｏｎ　ｔｏ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍ　ａｎｄ　ＣＳＳ　ｄｅｂｕｇｇｉｎｇ．Ｆｉｒｓｔ　ｉｔ　ｉｎｔｒｏｄｕｃｅｓ　ｃｏｍｍｏｎｌｙ　ｕｓｅｄ　ｂｒｏｗｓｅｒｓ，ａｎｄ　ｔｈｅｎ　ｉｔ　ｅｎｕｍｅｒ－　ａｔｅｓ　ｓｏｍｅ　ＣＳＳ　ｂｒｏｗｓｅｒ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｐｒｏｂｌｅｍｓ　ａｎｄ　ｇｉｖｅｓ　ｔｈｅ　ｓｏｌｕｔｉｏｎ．Ｆｉｎａｌｌｙ　ｉｔ　ｐｒｅｓｅｎｔｓ　ｔｗｏ　ｃｏｍｍｏｎ　ｉｎｓｐｅｃｔｉｏｎ　ｔｏｏｌｓ　ｆｏｒ　ＣＳＳ：ＩＥＴｅｓｔｅｒ　ａｎｄ　ｆｉｒｅｆｕｇ．　Ｋｅｙｗｏｒｄｓ　ＣＳＳ；ｂｒｏｗｓｅｒ；ｃｏｍｐａｔｉｂｉｌｉｔｙ；ＩＥＴｅｓｔｅｒ；ｆｉｒｅｆｕｇ　因浏览器开发者对ＣＳＳ国际通用标准Ｗ３Ｃ　（Ｗｏｒｌｄ　Ｗｉｄｅ　Ｗｅｂ　Ｃｏｎｓｏｒｔｉｕｍ）理解不同，而导致同一　Ｔｒａｖｅｌｅｒ）；３６０安全浏览器；搜狗浏览器（Ｓｏｕｇｏｕ　Ｅｘｐｌｏｒｅｒ）等。　（２）Ｍｏｚｉｌｌａ　Ｆｉｒｅｆｏｘ（火狐）浏览器。Ｆｉｒｅｆｏｘ是由　Ｍｏｚｉｌｌａ公司开发的一个开源浏览器，它能够跨多个操　作系统，此外还具有体积小、速度快等优点。这款免费　的开源浏览器也占据着很大的市场份额。　网页在不同的浏览器中呈现不同的效果，即所谓的浏　览器兼容问题。若界面设计者能够周全地考虑兼容问　题，不仅能体现其技术水平，也是对其网站用户负责的　一种态度　。　１　常用浏览器介绍　浏览器是万维网（Ｗｅｂ）服务的客户端浏览程序，　２　ＣＳＳ浏览器兼容性问题分析与解决　（１）各浏览器的内外补丁默认值不同。在网页中　随便写几个标签，如果对其不加任何样式控制，在各种　可向万维网服务器发送各种请求，并对从服务器发来　的超文本信息和各种多媒体数据格式进行解释、显示　和播放。　浏览器下显示的效果就会有较大差别。这是因为各浏　览器ｐａｄｄｉｎｇ和ｍａｒｇｉｎ默认值不同。这是最常见的浏　览器兼容性问题，解决方法就是在ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ，ｃｓｓ）文件开头用通配符　设置各个标签的　几种常用浏览器：　（１）ＩＥ（１ｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ）浏览器。介绍是由　Ｍｉｃｒｏｓｏｆｔ公司开发，因其捆绑在Ｗｉｎｄｏｗｓ系统中，并且　是免费推出，所以占据着绝大部分的市场份额。目前，　ＩＥ浏览器使用较多的版本是ＩＥ６．０、ＩＥ７．０、ＩＥ８．０以及　ＩＥ９．０。以ＩＥ为内核的常见浏览器：世界之窗（Ｔｈｅ　内外补丁为０，即　｛ｍａｒｇｉｎ：０；ｐａｄｄｉｎｇ：０；｝　ｊ。　（２）ｍａｒｇｉｎ加倍的问题。块属性标签被设置ｆｌｏａｔ　后，如果又有横向的ｍａｒｇｉｎ，在ＩＥ６．０中显示的ｍａｒｇｉｎ　值将是设置值的２倍。这是ＩＥ６．０的一个常见ｂｕｇ，是　ｌｆｏａｔ布局中最常见的兼容性问题。解决方法是在ｄｉｖ　标签样式控制中加入ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ；将其转化为行内　属性　。　Ｗｏｒｌｄ）；傲游浏览器（Ｍａｘｔｈｏｎ）；腾讯ＴＦ（Ｔｅｎｃｅｎｔ　收稿日期：２０１２—０２—２１　作者简介：宋玉伟（１９８６一），女，硕士研究生。研究方向：　网络信息处理，Ｗｅｂ信息系统，数据库系统。李隐峰　（１９７４一），男，副教授，硕士生导师。研究方向：Ｗｅｂ信息　例如：＜ｄｉｖ　ｉｄ＝“ｔｅｓｔｌ”＞相应的ＣＳＳ代码为：＃　ｔｅｓｔｌ｛ｆｌｏａｔ：ｌｅｆｔ；ｍａｒｇｉｎ：１０　ｐｘ　０　０　１０　ｐｘ；｝。在不同的　浏览器下显示如图１和图２所示；当样式表中加入　ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ；后，ＩＥ６显示效果如图２所示。　系统，网络安全，计算机网络教学与应用。　ｗｗｗ．ｄｉａｎｚｉｋｅｊｉ．ｏｒａｌ——　１４７　宋玉伟，等：ＣＳＳ浏览器兼容性问题研究　ｍｉｎ—ｈｅｉｇｈｔ：５００　ｐｘ；，但它在ＩＥ６．０浏览器中不能被识　别。解决方法是｛ｍｉｎ—ｈｅｉｇｈｔ：５００　ｐｘ：ｈｅｉｇｈｔ：ａｕｔｏ！　ｉｍｐｏｒｔａｎｔ；ｈｅｉｇｈｔ：１００　ｐｘ；ｏｖｅｒｌｆｏｗ：ｖｉｓｉｂｌｅ；｝　（６）ｄｉｖ的居中问题。如果要让一个具有一定宽　图１　ＩＥ６．０下左边距变为２０　ｐｘ　度的ｄｉｖ（＜ｄｉｖ　ｉｄ：“ｃｏｎｔａｉｎｅｒ”＞…＜／ｄｉｖ＞）在ＩＥ浏　览器中水平居中显示，只需用ｂｏｄｙ｛ｔｅｘｔ—ａｌｉｇｎ：　ｃｅｎｔｅｒ；｝＃ｃｏｎｔａｉｎｅｒ｛ｗｉｄｔｈ：８００　ｐｘ；｝，但这在Ｆｉｒｅｆｏｘ浏　览器下却不能实现。解决方法是将ＣＳＳ代码改为　ｂｏｄｙ｛ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；｝＃ｃｏｎｔａｉｎｅｒ｛ｗｉｄｔｈ：８００　ｐｘ；　ｍａｒｇｉｎ：０　ａｕｔｏ；ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ；｝。　图２　ＩＥ７．０／ＩＥ８．０／ＦＦ下效果　（７）ｕｌ和０ｌ标签的ｐａｄｄｉｎｇ与ｍａｒｇｉｎ问题。ｕｌ和　０ｌ标签在Ｆｉｒｅｆｏｘ浏览器中默认是有ｐａｄｄｉｎｇ值的，而　在ＩＥ浏览器中只有ｍａｒｇｉｎ默认有值。这样只要先定　义ｕｌ（或ｏ１）｛ｍａｒｇｉｎ：０；ｐａｄｄｉｎｇ：Ｏ；｝即可。　（３）无法定义较小高度的容器。在ＩＥ６．０、ＩＥ７．０　及遨游浏览器中，定义较小高度的标签，这个标签的高　度不受控制，超出设置的高度。出现这个问题的原因　是ＩＥ８．０之前的浏览器都会给标签一个最小默认的行　（８）利用ＣＳＳ　Ｈａｃｋ。根据不同的浏览器对ＣＳＳ的　支持及解析结果不同样，ＣＳＳ中的优先级不同，可以对　不同的浏览器写不同的ＣＳＳ，这就是ＣＳＳ　Ｈａｃｋ的工作　原理　一　。　高的高度。即使标签是空的，高度还是会达到默认的　行高。解决方法是给超出高度的标签设置ｏｖｅｒｆｌｏｗ：　ｈｉｄｄｅｎ；或者设置ｌｉｎｅ—ｈｅｉｇｈｔ小于设置的高度。　首先需要了解以下规则：　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／所有浏览器通用　一（４）图片默认有间距。将几个ｉｍｇ标签放在一起　时，由于ｉｍｇ标签属于行内属性的标签，只要不超过容　器宽度，ｉｍｇ标签都会在一行中显示。但在某些浏览器　下图片之间会存在空隙，即使加了通配符　｛ｍａｒｇｉｎ：０；　ｐａｄｄｉｎｇ：０；｝也不起作用。要去掉这个间距应使用ｆｌｏａｔ　属性为ｉｍｇ布局，虽然使用负ｍａｒｇｉｎ也能够解决，但由　于负ｍａｒｇｉｎ本身就很容易引起浏览器兼容性问题，所　以不建议使用。　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／“”ＩＥ６．０浏览器专用　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；／／“：ｌ：”、ＩＥ６．０、ＩＥ７．０共用，　ＩＥ８．０、ｆｉｒｅｆｏｘ均不能识别　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ　！ｉｍｐｏｒｔａｎｔ；／／“！ｉｍｐｏｒｔａｎｔ”　Ｆｉｒｅｆｏｘ、ＩＥ７．０、ＩＥ８．０浏览器共用　其次，还需了解ＣＳＳ代码的优先级，！ｉｍｐｏｒｔａｎｔ的　优先级最高，行内样式次之，ＩＤ选择器再次之，类选择　（５）标签最小高度ｍｉｎ—ｈｅｉｇｈｔ不兼容。当一个标　器更次之，标签选择器最低。对于优先级相同的按后　出现优先原则。　目前比较全的ＣＳＳ　Ｈａｃｋ浏览器兼容性如表２　所示　。　签的内容高度小于一个值（如５００　ｐｘ）时，这个标签的　高度为５００　ｐｘ。而当内容高度＞５００　ｐｘ时，容器高　度等于内容的高度，而不出现滚动条。这时需要用到　表１　浏览器ＣＳＳ选择器兼容性一览表　ｌ４８　ｗ　ｗ　ｗ　Ｏｉａｎｚｉｋｅｊｉ　ｏｒｏ　宋玉伟，等：ＣＳＳ浏览器兼容性问题研究Ｉ｜葛匿重圈　注：、／表示目前支持；△表示浏览器部分支持当前ＣＳＳ选择器；Ｘ表示浏览器完全不支持。　仅方便了网页的调试，其编辑、挪动区块位置、可视化　３　ＩＥＴｅｓｔｅｒ与Ｆｉｒｅｂｕｇ　（１）ＩＥＴｅｓｔｅｒ。针对ＩＥ浏览器的不同版本，界面设　标尺能够为ＣＳＳ学习者提供有效的帮助。　４　结束语　集中介绍了常用浏览器、ＣＳＳ兼容性问题、解决方　法和两种ＣＳＳ调试工具，并且举例说明网页设计中经　常遇到的ＣＳＳ样式表在不同浏览器下的兼容性问题及　计者均需查看网页的显示效果，若在自己的机器上安装　各种版本的浏览器，较为复杂。ＩＥＴｅｓｔｅｒ是免费软件，是　ＩＥ浏览器兼容性测试工具，它同时包括了ＩＥ　５．５、　ＩＥ６．０、ＩＥ７．０、ＩＥ８．０、ＩＥ９．０的所有内核，可在ＩＥＴｅｓｔｅｒ中　查看不同ＩＥ版本的页面显示效果，以保证测试的页面　可在各版本ＩＥ浏览器中正确显示。　（２）Ｆｉｒｅｂｕｇ。Ｆｉｒｅｂｕｇ是Ｆｉｒｅｆｏｘ浏览器的一个插　件，集网站语言查看与编辑、控制台、网络状况监视器　其解决方法，并总结了浏览器兼容性。　参考文献　［１］张志洁，李书明，赵玲．ＣＳＳ技术在网页设计中的应用探　析［Ｊ］．网络通讯与安全，２００７（１０）：３Ｏ一３６．　［２］　ＲＡＣＨＥＬ　Ａ．ＣＳＳ精粹［Ｍ］．丁卫颖，李奕，吴戈，译．北京：　人民邮电出版社。２００７．　于一体，是开发调试ＪａｖａＳｃｒｉｐｔ、ＣＳＳ、ＨＴＭＬ等网站语　言的助手工具。　瀚　≤　［３］　巩恩伟．ＣＳＳ在浏览器中的兼容性及使用技巧［Ｊ］．电脑　知识与技术，２００９，５（６）：１４１３—１４１４．　［４］　黎亚红，罗藤．ＣＳＳ在不同浏览器中的兼容性问题浅析　［Ｊ］，岳阳职业技术学院院报，２００８，２３（３）：８４—８６．　［５］ＣＢＲＩＳＴＯＰＢＥＲ　Ｓ．ＣＳＳ　Ｃｏｏｋｂｏｏｋ［Ｍ］．陈寒林，译．北京：　电子工业出版社，２００７．　图３　Ｆｉｒｅｂｕｇ界面：ＣＳＳ查看器　这里介绍的Ｆｉｒｅｂｕｇ的ＣＳＳ调试器，查看器能够列　出页面调用的每一个ＣＳＳ样式表：定义位置、详细ＣＳＳ　代码及其从属继承关系。用户可在该查看器中直接添　［６］　Ｂｉｎｇｏ．浏览器／ＣＳＳ选择器兼容性总结［ＥＢ／ＯＬ］．（２０１０　—加、修改、删除ＣＳＳ样式表属性，当前页面即可直接显　示编辑后的页面效果。Ｆｉｒｅｂｕｇ的ＣＳＳ查看器的功能不　１Ｏ—Ｏ４）［２０１２—０１一Ｏ５］ｈｔｔｐ：／／ｂｌｏｇ．ｂｉｎｇｏ９２９．ｃｏｍ／ｅｓｓ　ｂｒｏｗｓｅｒ—ｓｕｐｐｏｒｔ．ｈｔｍ１．　—ＷＷＷ．ｄｉａｔｌｚｉｋＰ￣ｊｉ．０ｒｇ——　１４９