跨浏览器开发经验总结（二） CSS
发布时间：2010-05-13 19:18:12 作者：佚名 
我要评论
我要评论css hack的使用，注意是为了解决页面在多个浏览器的兼容性问题。
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
CSS类级别的hack仅IE7识别 *+html {…}
IE6及IE6以下识别 * html {…}
opera、safari、chrome识别：
@media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则
@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则
仅opera识别：
@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}
CSS属性级别的hack仅IE识别 ： margin-left:10px\9;
仅IE8识别 ： margin-left:10px\0;
IE6/IE7识别 ： *margin-left:10px;
仅IE6识别 : _margin-left:10px;
CSS Hack综合示例：
/**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/
.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}
@media all and (min-width: 0px){
.news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}
}
HTML代码片断级别的hack（仅IE识别）① <!--[if !IE]> 除IE外都可识别的代码片断<![endif]-->
② <!--[if IE]> 所有的IE可识别的代码片断 <![endif]-->
③ <!--[if IE 7]> 仅IE7可识别的代码片断 <![endif]-->
④ <!--[if lt IE 7]> IE7以及IE7以下版本可识别的代码片断<![endif]-->
⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可识别的代码片断 <![endif]-->
用脚本设置CSS属性
设置元素的style样式
Var spanElement = document.getElementById(“mySpan”);
//下面写法保证出IE外，所有浏览器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的写法保证IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;
设置元素的class属性
Var element = document.getElementById(“myElement”);
//下面的写法保证除IE外，所有浏览器可用
Element.setAttribute(“class”,”styleClass”);
//下面写法保证IE可用
Element.setAttribute(“className”,”styleClass”);
具体CSS效果的实现
按钮悬停时鼠标呈现手的形状
cursor:hand和cursor:pointer效果是一样的，当鼠标移动至该元素时呈现手的形状。但是应该尽量使用cursor:pointer而非cursor:hand，因为cursor:hand只有IE识别，而cursor:pointer才是CSS2.0的标准属性，IE之外的浏览器也支持。
窗口滚动条显示问题
在使用弹出窗口或者框窗口架的时候，有时会有多余的滚动条出现，这时需要从多个方面进行确认：
弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
框架标签的属性中是否设置了scrolling=“yes”
窗口或框架内页面的CSS中，是否对html或body的overflow进行了样式定义，如果没有请参考如下代码。
html {
margin: 0;
padding: 0;
overflow-x:hidden;
overflow-y:hidden;
}
line-height 属性
line-height行高指的是文本行的基线间的距离，即字体最底端与字体内部顶端之间的距离。如下图所示：
文本之间的空白距离（行距）不仅仅是行高决定的，同时也受字号的影响。有时侯同一行内的不同元素底边没有对齐，有可能就是行高不统一造成的，这时关调整高度和对齐方式是不够的，还需要调整line-height属性。
display:inline-block
display 属性有三个值：block，inline，inline-block。其中display:block就是将元素显示为块级元素；display:inline就是将元素显示为行内元素；display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
l block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子， display属性默认值为block。
l inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子， display属性默认值为inline。
l inline-block的元素特点：呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性，目前IE8、Firefox3、Opera、Safari都可以支持该属性了。
div中的文字自动换行问题
目前控制换行是使用以下CSS：
div．content {
word-wrap:break-word;
overflow:hidden;
}
在 IE 、Firefox、Safari、Chrome下没有任何问题，但是在 Opera下，长串英文会被遮住超出的内容。如果想要让长串英文字符也自动换行，还需要设置word-break:break-all; （但是，此方式会导致普通的英文语句中的单词会被断开，ie下也是）。英文单词在排版规则上不应该被断开，长串英文字符其实就是一个比较长的单词，自然也不需要断开换行显示了，所以一般不需要额外设置word-break:break-all; 。
textarea中的文字自动换行问题
在textarea中设置输入内容的自动换行，也是在CSS中设置word-wrap:break-word;属性。需要额外注意的是textarea元素本身有一个warp属性，其取值含义如下：
off：不自动换行；
hard：自动硬回车换行，换行标记一同被传送到服务器端（Opera、Chrome下不传）；
soft：自动软回车换行，换行标记不会传送到服务器端。
IE6及IE6以下识别 * html {…}
opera、safari、chrome识别：
@media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则
@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则
仅opera识别：
@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}
CSS属性级别的hack仅IE识别 ： margin-left:10px\9;
仅IE8识别 ： margin-left:10px\0;
IE6/IE7识别 ： *margin-left:10px;
仅IE6识别 : _margin-left:10px;
CSS Hack综合示例：
/**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/
.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}
@media all and (min-width: 0px){
.news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}
}
HTML代码片断级别的hack（仅IE识别）① <!--[if !IE]> 除IE外都可识别的代码片断<![endif]-->
② <!--[if IE]> 所有的IE可识别的代码片断 <![endif]-->
③ <!--[if IE 7]> 仅IE7可识别的代码片断 <![endif]-->
④ <!--[if lt IE 7]> IE7以及IE7以下版本可识别的代码片断<![endif]-->
⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可识别的代码片断 <![endif]-->
用脚本设置CSS属性
设置元素的style样式
Var spanElement = document.getElementById(“mySpan”);
//下面写法保证出IE外，所有浏览器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的写法保证IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;
设置元素的class属性
Var element = document.getElementById(“myElement”);
//下面的写法保证除IE外，所有浏览器可用
Element.setAttribute(“class”,”styleClass”);
//下面写法保证IE可用
Element.setAttribute(“className”,”styleClass”);
具体CSS效果的实现
按钮悬停时鼠标呈现手的形状
cursor:hand和cursor:pointer效果是一样的，当鼠标移动至该元素时呈现手的形状。但是应该尽量使用cursor:pointer而非cursor:hand，因为cursor:hand只有IE识别，而cursor:pointer才是CSS2.0的标准属性，IE之外的浏览器也支持。
窗口滚动条显示问题
在使用弹出窗口或者框窗口架的时候，有时会有多余的滚动条出现，这时需要从多个方面进行确认：
弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
框架标签的属性中是否设置了scrolling=“yes”
窗口或框架内页面的CSS中，是否对html或body的overflow进行了样式定义，如果没有请参考如下代码。
复制代码
代码如下:html {
margin: 0;
padding: 0;
overflow-x:hidden;
overflow-y:hidden;
}
line-height 属性
line-height行高指的是文本行的基线间的距离，即字体最底端与字体内部顶端之间的距离。如下图所示：
文本之间的空白距离（行距）不仅仅是行高决定的，同时也受字号的影响。有时侯同一行内的不同元素底边没有对齐，有可能就是行高不统一造成的，这时关调整高度和对齐方式是不够的，还需要调整line-height属性。
display:inline-block
display 属性有三个值：block，inline，inline-block。其中display:block就是将元素显示为块级元素；display:inline就是将元素显示为行内元素；display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
l block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子， display属性默认值为block。
l inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子， display属性默认值为inline。
l inline-block的元素特点：呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性，目前IE8、Firefox3、Opera、Safari都可以支持该属性了。
div中的文字自动换行问题
目前控制换行是使用以下CSS：
复制代码
代码如下:div．content {
word-wrap:break-word;
overflow:hidden;
}
在 IE 、Firefox、Safari、Chrome下没有任何问题，但是在 Opera下，长串英文会被遮住超出的内容。如果想要让长串英文字符也自动换行，还需要设置word-break:break-all; （但是，此方式会导致普通的英文语句中的单词会被断开，ie下也是）。英文单词在排版规则上不应该被断开，长串英文字符其实就是一个比较长的单词，自然也不需要断开换行显示了，所以一般不需要额外设置word-break:break-all; 。
textarea中的文字自动换行问题
在textarea中设置输入内容的自动换行，也是在CSS中设置word-wrap:break-word;属性。需要额外注意的是textarea元素本身有一个warp属性，其取值含义如下：
off：不自动换行；
hard：自动硬回车换行，换行标记一同被传送到服务器端（Opera、Chrome下不传）；
soft：自动软回车换行，换行标记不会传送到服务器端。
相关文章
这篇文章主要介绍了浅谈原生页面兼容IE9问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-12-16- 这篇文章主要介绍了新版chrome浏览器设置允许跨域的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-11-30
css hack之\9和\0就可能对hack IE11\IE9\IE8无效
每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览2020-03-20css区分ie8/ie9/ie10/ie11 chrome firefox的代码
这篇文章主要介绍了css区分ie8/ie9/ie10/ie11 chrome firefox的代码,需要的朋友可以参考下2020-03-20
这篇文章主要介绍了解决CSS浏览器兼容性问题的4种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-28
这篇文章主要介绍了常见的浏览器兼容性问题(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-02-20
这篇文章主要介绍了border-radius IE8兼容处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-12- 这篇文章主要介绍了浅谈遇到的几个浏览器兼容性问题，详细的介绍了几种我遇到的问题和解决方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-26
这篇文章主要介绍了base64图片在各种浏览器的兼容性处理的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-14
这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-20
最新评论