浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试

浏览数：24 / 时间：2015年06月09日

        在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明，现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。

1）列表不能换行的问题

问题：

        li设置为浮动，后面的li紧随其后，不能换行

解决：

       在下一个li上清除浮动：clear:both

实例：   

<style type=text/css>
#one{
float:left;
}
#two{
clear:left;
}
</style>
</head>
<body> 
<li  id="one"> 一级标题
  <div id="onediv"> 
    <ul  id="oneli">二级标题 </ul> 
    <ul id="oneli"> 二级标题</ul> 
  </div> 
</li> 
<li id="two"> 一级标题
  <div> 
    <ul> 二级标题</ul> 
    <ul> 二级标题</ul> 
  </div> 
</li> 
</body>

2）如何对齐文本和文本输入框

问题：

        当input元素在设置了高时，在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象，其他正常，包括opera

解决：

        vertical-align:middle;

实例：

<style type="text/css">
　 .in{
　　width:200px;
}
.alter
{
　　width:200px;
　　vertical-align:middle;
}
</style>
</head>
<body>
<div>修正前：</div>
<div>
用户名<input name="用户名" type="text" class="in" style="height:100px; ">
密码<input name="密码" type="text"  class="in" style="height:100px; "  >
</div>
<br/>
<br/>
<div>修正后：</div>
<div>用户名<input name="用户名" type="text" class="alter" style="height:100px; "  >
密码<input name="密码" type="text"  class="alter" style="height:100px; " ></div>
</body>

3）容器宽度在浏览器中解释不同

问题：

       不同浏览器下宽度不同，比如说设置width：200px，在iE7、IE8、IE9下显示的是200px，在FF、Chrome、Opera中显示的是220px

解决：

       用width:200px; *width:220px，其中iE7、IE8、IE9会识别两个宽度，以后者为准，故宽度为220px，在FF、Chrome、Opera中，识别第一个宽度，解析后显示宽度为220px

实例：

</head>
<body>
修正前：
　<div style="border:10px solid red;width:200px;height:200px;cursor:pointer;" onclick="alert(this.offsetWidth)" >点我，看看有什么不同！
</div>
修正后：
　<div  style="border:10px solid red;width:200px; *width:220px; height:200px;cursor:pointer; " onclick="alert(this.offsetWidth)" >点我，看看有什么不同！
</div>
</body>

4） Div居中问题

问题：

       IE7、IE8、IE9在设置了margin-left和margin-right为auto后，并不能使div居中显示，其他行

解决：

      设定body居中，定义text-algin: center

实例：

<body style="text-align:center;">
　<div style="margin-left:auto;margin-right:auto; width:300px; height:200px; border:10px solid red;" >div居中问题解决
</div>
</body>

5） 字体大小问题

问题：

       对字体大小small的定义不同，Firefox中为16px，而IE7、IE8、IE9中为16px，差别挺大

解决：

       明确说明字体的大小，例如16px

实例：

<body >
	<p style="font-size:small;">p对象中的内容，此时字体大小为small</p>　
	<p style="font-size:16px;">p对象中的内容,此时字体大小固定为16px</p>
</div>
</body>

6） min-height问题

问题：

       IE7、IE8、IE9对min-height不识别，其他无问题

解决：

      #box{width: 100px; height: 35px;}

     html>body#box{ width:auto; height:auto; width:100px; min-height:35px;}

 实例： 

　　<style type="text/css">
#box{ width: 100px; height: 35px;}
html>body #box{ width:auto; height:auto; width:100px; min-height:35px;} 
　　</style>
</head>
<body >
	 <div style="border:1px solid red; width:150px; height:35px;">最小宽度问题</div>
	 <br/>
	 <div style="border:1px solid red; width:150px; min-height:35px;">最小宽度问题</div>
	 解决方法：
	 <div id="box" style="border:1px solid red;">最小宽度问题</div>
	 <br/>
	 <div id="box" style="border:1px solid red;">最小宽度问题</div>
</div>
</body>

7） 层垂直居中

问题：

         层不能垂直居中

解决：

         利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1px solid red;

实例：

<style type="text/css">
#hello{
position:absolute;
top:50%;
left:50%;
margin:-100px;
width:200px;
height:200px;
border:1px solid red;
}
　　</style>
</head><body> 
<div id="hello">层垂直居中问题</div> 
</body>

8） 嵌套div标签的居中问题

问题：

         假定有一下情况：即div嵌套div

         <div id="a">
         <div id="b"> </div>
         </div>

        此时要设置内层div在外层div的居中位置，在外层设置了text-algin为center后，IE7、IE8、IE9显示正常，但是在IE10和chrome和opera和FF仍然显示在居左位置。

解决：

    除在外层设置text-algin为center，在内层div中设置margin：0 auto样式

实例： 

　　<style type="text/css">
 .alter{
 width:150px; height:50px; 

 }
　　</style>
</head>
<body >
解决前：
	 <div style="border:1px solid red; width:300px; height:100px;text-align:center;">
	<div style="border:1px solid red; width:150px; height:50px;">嵌套div标签的居中问题</div>
	</div>
</div>
解决后：
	 <div style="border:1px solid red; width:300px; height:100px;text-align:center;">
	<div style="border:1px solid red; width:150px; height:50px; margin:0 auto;">嵌套div标签的居中问题</div>
	</div>
</body>

9） td高度的问题

问题：

        在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。

解决：

       暂无解决方法

其问题示例如下：   

<body >
<table>
<tr>
<td style="line-height:20px; border:5px solid red;">设置line-height:20px</td>
</tr>
</table>
<table>
<tr>
<td style="height:20px; border:5px solid red;">设置height:20px</td>
</tr>
</table>
</body>

10） li指定高度后，出现排版错误

问题：

       在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象

解决：

       设置line-height

实例：

<style type="text/css">
li{
list-style-position:inside;
}
　　</style>
</head><body > 
解决前：
<li style="height:40px;">hello</li>
<li style="height:40px;">hello</li>
<li style="height:40px;">hello</li>
<li style="height:40px;">hello</li>
解决后：
<li style="line-height:40px;">hello</li>
<li style="line-height:40px;">hello</li>
<li style="line-height:40px;">hello</li>
<li style="line-height:40px;">hello</li>
</body>

11） list-style-position默认值的问题

问题：

       IE7、FF、chrome、Opera默认的li的list-style-position属性为inside，而在IE8、IE9、IE10默认的是list-style-position:outside

解决：

         将其显示的样式明确表示

实例：

<style type="text/css">
li{
	list-style-position:inside;
}
　　</style>
</head><body > 
<div>解决前：
<li >hello</li>
<li >hello</li>
</div>
<div>解决后：
<li >hello</li>
<li >hello</li>
</div>
</body>

12） 禁止选取网页内容

问题：

       在需要禁止选取网页的内容，FF用-moz-user-select:none，其他浏览器用onselectstart=‘return false‘

解决：

       FF：-moz-user-select:none

       其他：onselectstart=‘return false‘

实例：

</head><body onselectstart =‘return false‘  > 
<div name="content" style="width:192px; -moz-user-select:none;"  >
善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息，在easyui框架下向datagrid中导入数据，因为1.0版本中社河做过这个功能，参照他的代码完成了我这部分，根本思想是一样的：查找数据转换为json格式，再显示到窗体中。
</div>
</body>

13）如何对其文本和文本输入框的内容

问题：

        当input元素在设置了高和设置了text-align:center时，在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象，其他正常，包括opera

解决：

       在样式中设置line-height:100px

实例：

<style type="text/css">
　 .in{
　　width:200px;
}
.alter
{
　　width:200px;
　　vertical-align:middle;
}
</style>
</head>
<body>
<div>修正前：</div>
<div>
用户名<input name="用户名" type="text" class="in" style="height:100px; line-height:100px;text-align:center;" value="zhudan" >
密码<input name="密码" type="text"  class="in" style="height:100px; line-height:100px;text-align:center;"  value="zhudan">
</div>
<br/>
<br/>
<div>修正后：</div>
<div>用户名<input name="用户名" type="text" class="alter" style="height:100px; line-height:100px;text-align:center;" value="zhudan" >
密码<input name="密码" type="text"  class="alter" style="height:100px; line-height:100px;text-align:center;" value="zhudan"></div>
</body>
        到此为止，我整理的有关于CSS的兼容性和JS的兼容性就在这里了，我感觉我所整理的这些东西也只是众多兼容性问题中的一些皮毛，更多的还有待我去发现解决总结。


      


郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： javascript html 浏览器 asp.net css javascript html 浏览器 asp.net css

相关文章

随机文章

您可能还喜欢

您可能还喜欢