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

学术论坛　ＣＳＳ在浏览器中兼容问题的一些解决办法　许元朋于黎江　（鄂东职业技术学院信息中心湖北黄冈４３８０００）　摘要：ＣＳＳ因其优越性在网页设计中被大量应用，但因为各种浏览器的内核不同存在兼容性的问题。本文重点介绍了解决这种兼容性的方　法ｃｓｓ　Ｈａｃｋ，并列举了几个常用的解决技巧．　．关键词：ＣＳＳ浏览器Ｈａｃｋ技巧　中图分类号：ＴＰ３９　文献标识码：Ａ　文章编号：１００７—９４１６（２０ｌ２）０４—０２７５—０２　在信息时代，网页成了人们获取信息的主要途径。人们在获取　信息时除了要求网页的信息量饱满外，对网页的外观、布局、色调也　提出了很高的要求。网页设计人员为了保证整个网站的风格色调统　一、美观大方，往往在页面中加入ＣＳＳ样式表对整个网站的网页进　行统一控制。　但用户查看网页的浏览器有很多种类型，不同的浏览器在开发　过程中对ＣＳＳ样式表解释意思不同或者是完全按照样式表的国际　通用标准Ｗ３Ｃ来设计，从而导致了一个页面在不同的浏览器中显　示的效果不一样，这样就出现了浏览器兼容的问题，给网页设计师　带来了很多不必要的麻烦。下面就跟大家一起探讨一下浏览器的兼　容性问题及在网页布局中的常用技巧。　１、如何解决兼容性问题　由于不同的浏览器，￣ＨＩＥ６，ＩＥ７，Ｍｏｚｉｌｌａ　Ｆｉｒｅｆｏｘ等，对ＣＳＳ　的解析认识不一样，因此会导致生成的页面效果不一样，得不到我　们所需要的页面效果。这个时候我们就需要针对不同的浏览器去　写不同的ＣＳＳ，让它能够同时兼容不同的浏览器，能在不同的浏览　器中也能得到我们想要的页面效果，这就是ＣＳＳ　Ｈａｃｋ。　ＣＳＳ　Ｈａｃｋ大致有３种表现形式，ＣＳＳ类内部Ｈａｃｋ、选择器Ｈａｃｋ　以及ＨＴＭＬ头部引用（ｉｆ　ＩＥ）Ｈａｃｋ，ＣＳＳ　Ｈａｃｋ主要针对ＩＥ浏览器。　类内部Ｈａｃｋ：比如ＩＥ６￣‘ｕ。识别下划线”一”和星号”　”，ＩＥ７能　识别星号”　”，但不能识别下划线ＩＩ—ＩＩ，而ｆｉｒｅｆｏｘ两个都不能认识。　选择器Ｈａｃｋ：比如ＩＥ６能识别＊ｈｔｍ１．ｃｌａｓｓ｛｝，ＩＥ７能识别　＊＋ｈｔｍ１．ｃｌａｓｓ｛｝或者十：ｆｉｒｓｔ－ｃｈｉｌｄ＋ｈｔｍ１．ｃｌａｓｓ｛｝。　ＨＴＭＬ头部引用（ｉｆ　ＩＥ）Ｈａｃｋ：针对所有ＩＥ：＜！－－［ｉｆ　ＩＥ］＞＜！一　您的代码一一＞＜！［ｅｎｄｉｆ］一一＞，针对ＩＥ６及以下版本：＜ｆ＿－［ｉｆ　Ｉｔ　ＩＥ　７］＞＜ｆ＿一您的代码一一＞＜！［ｅｎｄｉｆ］－－＞，这类Ｈａｃｋ不仅对ＣＳＳ生效，　对写在判断语句里面的所有代码都会生效。　它们的书写顺序也不一样，一般是将识别能力强的浏览器的　ＣＳＳ写在后面。对于我们经常用的ＩＥ６，ＩＥ７，ＦＦ这几个浏览器，他们　的书写顺序为：ＦＦ，ＩＥ７，ＩＥ６．　２、几种常用兼容性技巧　２．１区别不同浏览器ＣＳＳ　Ｈａｃｋ的写法　区另１ＩＥ６与ＦＦ　＜ｓｔｙｌｅ＞　ｂｏｄｙ：　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ＩＥ６中看到的是绿色，在ｆｉｒｅｆｏｘ中看到的是红色。因为ｆｉｒｅｆｏｘ　它不认识后面那个带星号的是什么东东，于是不解析它，所以背景　是红色的。　在ＩＥ６中，它两个ｂａｃｋｇｒｏｕｎｄ都能识别出来，它解析到的结果　是：ｄｉｖ｛ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；｝，根据优先级别，处　在后面的ｇｒｅｎ的优先级高，所以这个ｄｉｖ的背景颜色就是绿色的。　区￣ｌＪＩＥ６与ＩＥ７　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ！ｉｍｐｏｒｔａｎｔ；　ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ＩＥ６中看到的是绿色，在ＩＥ７中看到的是红色，　区￣ｌ｜ＩＥ７与ＦＦ　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　卡ｂａｃｋｇｒ０ｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ７中看到的是绿色，ｉｆｒｅｆｏｘ不识　别星号．　区别ＦＦ，ＩＥ７，ＩＥ６　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ７中看到的是绿色，在ＩＥ６中看　到的是蓝色．　区￣｝ｑＦＦ，ＩＥ９，ＩＥ８，ＩＥ７，ＩＥ６　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌａｃｋ＼０，　ｂａｃｋｇｒｏｕｎｄ：ｙｅｌｌｏｗ＼９；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ９中看到的是黑色，在ＩＥ８中看　⑧　

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

学术论坛　ＣＳＳ在浏览器中兼容问题的一些解决办法　许元朋于黎江　（鄂东职业技术学院信息中心湖北黄冈４３８０００）　摘要：ＣＳＳ因其优越性在网页设计中被大量应用，但因为各种浏览器的内核不同存在兼容性的问题。本文重点介绍了解决这种兼容性的方　法ｃｓｓ　Ｈａｃｋ，并列举了几个常用的解决技巧．　．关键词：ＣＳＳ浏览器Ｈａｃｋ技巧　中图分类号：ＴＰ３９　文献标识码：Ａ　文章编号：１００７—９４１６（２０ｌ２）０４—０２７５—０２　在信息时代，网页成了人们获取信息的主要途径。人们在获取　信息时除了要求网页的信息量饱满外，对网页的外观、布局、色调也　提出了很高的要求。网页设计人员为了保证整个网站的风格色调统　一、美观大方，往往在页面中加入ＣＳＳ样式表对整个网站的网页进　行统一控制。　但用户查看网页的浏览器有很多种类型，不同的浏览器在开发　过程中对ＣＳＳ样式表解释意思不同或者是完全按照样式表的国际　通用标准Ｗ３Ｃ来设计，从而导致了一个页面在不同的浏览器中显　示的效果不一样，这样就出现了浏览器兼容的问题，给网页设计师　带来了很多不必要的麻烦。下面就跟大家一起探讨一下浏览器的兼　容性问题及在网页布局中的常用技巧。　１、如何解决兼容性问题　由于不同的浏览器，￣ＨＩＥ６，ＩＥ７，Ｍｏｚｉｌｌａ　Ｆｉｒｅｆｏｘ等，对ＣＳＳ　的解析认识不一样，因此会导致生成的页面效果不一样，得不到我　们所需要的页面效果。这个时候我们就需要针对不同的浏览器去　写不同的ＣＳＳ，让它能够同时兼容不同的浏览器，能在不同的浏览　器中也能得到我们想要的页面效果，这就是ＣＳＳ　Ｈａｃｋ。　ＣＳＳ　Ｈａｃｋ大致有３种表现形式，ＣＳＳ类内部Ｈａｃｋ、选择器Ｈａｃｋ　以及ＨＴＭＬ头部引用（ｉｆ　ＩＥ）Ｈａｃｋ，ＣＳＳ　Ｈａｃｋ主要针对ＩＥ浏览器。　类内部Ｈａｃｋ：比如ＩＥ６￣‘ｕ。识别下划线”一”和星号”　”，ＩＥ７能　识别星号”　”，但不能识别下划线ＩＩ—ＩＩ，而ｆｉｒｅｆｏｘ两个都不能认识。　选择器Ｈａｃｋ：比如ＩＥ６能识别＊ｈｔｍ１．ｃｌａｓｓ｛｝，ＩＥ７能识别　＊＋ｈｔｍ１．ｃｌａｓｓ｛｝或者十：ｆｉｒｓｔ－ｃｈｉｌｄ＋ｈｔｍ１．ｃｌａｓｓ｛｝。　ＨＴＭＬ头部引用（ｉｆ　ＩＥ）Ｈａｃｋ：针对所有ＩＥ：＜！－－［ｉｆ　ＩＥ］＞＜！一　您的代码一一＞＜！［ｅｎｄｉｆ］一一＞，针对ＩＥ６及以下版本：＜ｆ＿－［ｉｆ　Ｉｔ　ＩＥ　７］＞＜ｆ＿一您的代码一一＞＜！［ｅｎｄｉｆ］－－＞，这类Ｈａｃｋ不仅对ＣＳＳ生效，　对写在判断语句里面的所有代码都会生效。　它们的书写顺序也不一样，一般是将识别能力强的浏览器的　ＣＳＳ写在后面。对于我们经常用的ＩＥ６，ＩＥ７，ＦＦ这几个浏览器，他们　的书写顺序为：ＦＦ，ＩＥ７，ＩＥ６．　２、几种常用兼容性技巧　２．１区别不同浏览器ＣＳＳ　Ｈａｃｋ的写法　区另１ＩＥ６与ＦＦ　＜ｓｔｙｌｅ＞　ｂｏｄｙ：　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ＩＥ６中看到的是绿色，在ｆｉｒｅｆｏｘ中看到的是红色。因为ｆｉｒｅｆｏｘ　它不认识后面那个带星号的是什么东东，于是不解析它，所以背景　是红色的。　在ＩＥ６中，它两个ｂａｃｋｇｒｏｕｎｄ都能识别出来，它解析到的结果　是：ｄｉｖ｛ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；｝，根据优先级别，处　在后面的ｇｒｅｎ的优先级高，所以这个ｄｉｖ的背景颜色就是绿色的。　区￣ｌＪＩＥ６与ＩＥ７　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ！ｉｍｐｏｒｔａｎｔ；　ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ＩＥ６中看到的是绿色，在ＩＥ７中看到的是红色，　区￣ｌ｜ＩＥ７与ＦＦ　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　卡ｂａｃｋｇｒ０ｕｎｄ：ｇｒｅｅｎ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ７中看到的是绿色，ｉｆｒｅｆｏｘ不识　别星号．　区别ＦＦ，ＩＥ７，ＩＥ６　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ７中看到的是绿色，在ＩＥ６中看　到的是蓝色．　区￣｝ｑＦＦ，ＩＥ９，ＩＥ８，ＩＥ７，ＩＥ６　＜ｓｔｙｌｅ＞　ｂｏｄｙ｛　ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌａｃｋ＼０，　ｂａｃｋｇｒｏｕｎｄ：ｙｅｌｌｏｗ＼９；　＊ｂａｃｋｇｒｏｕｎｄ：ｇｒｅｅｎ；　ｂａｃｋｇｒｏｕｎｄ：ｂｌｕｅ；　｝　＜／ｓｔｙｌｅ＞　在ｆｉｒｅｆｏｘ中看到的是红色，在ＩＥ９中看到的是黑色，在ＩＥ８中看　⑧