web开发中有关浏览器兼容问题及其解决方案的记录
2015-09-24 10:20
387 查看
在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明，现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。
li设置为浮动，后面的li紧随其后，不能换行
解决：
在下一个li上清除浮动：clear:both
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
当input元素在设置了高时，在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象，其他正常，包括opera
解决：
vertical-align:middle;
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
不同浏览器下宽度不同，比如说设置width：200px，在iE7、IE8、IE9下显示的是200px，在FF、Chrome、Opera中显示的是220px
解决：
用width:200px; *width:220px，其中iE7、IE8、IE9会识别两个宽度，以后者为准，故宽度为220px，在FF、Chrome、Opera中，识别第一个宽度，解析后显示宽度为220px
实例：
[html]
view plaincopy
<span style="font-size:18px;"></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></span>
IE7、IE8、IE9在设置了margin-left和margin-right为auto后，并不能使div居中显示，其他行
解决：
设定body居中，定义text-algin: center
实例：
[html]
view plaincopy
<span style="font-size:18px;"><body style="text-align:center;">
<div style="margin-left:auto;margin-right:auto; width:300px; height:200px; border:10px solid red;" >div居中问题解决
</div>
</body></span>
对字体大小small的定义不同，在Firefox和Chrome中为small，而IE7、IE8、IE9中为16px，差别挺大
解决：
明确说明字体的大小，例如16px
实例：
[html]
view plaincopy
<span style="font-size:18px;"><body >
<p style="font-size:small;">p对象中的内容，此时字体大小为small</p>
<p style="font-size:16px;">p对象中的内容,此时字体大小固定为16px</p>
</div>
</body></span>
IE7、IE8、IE9对min-height不识别，其他无问题
解决：
#box{width: 100px; height: 35px;}
html>body#box{ width:auto; height:auto; width:100px; min-height:35px;}
实例：
[html]
view plaincopy
<span style="font-size:18px;"> <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></span>
层不能垂直居中
解决：
利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1px solid red;
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
假定有一下情况：即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样式
实例：
[html]
view plaincopy
<span style="font-size:18px;"> <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></span>
在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。
解决：
暂无解决方法
其问题示例如下：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象
解决：
设置line-height
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
IE7、FF、chrome、Opera默认的li的list-style-position属性为inside，而在IE8、IE9、IE10默认的是list-style-position:outside
解决：
将其显示的样式明确表示
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
在需要禁止选取网页的内容，FF用-moz-user-select:none，其他浏览器用onselectstart='return false'
解决：
FF：-moz-user-select:none
其他：onselectstart='return false'
实例：
[html]
view plaincopy
<span style="font-size:18px;"></head><body onselectstart ='return false' >
<div name="content" style="width:192px; -moz-user-select:none;" >
善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息，在easyui框架下向datagrid中导入数据，因为1.0版本中社河做过这个功能，参照他的代码完成了我这部分，根本思想是一样的：查找数据转换为json格式，再显示到窗体中。
</div>
</body></span>
当input元素在设置了高和设置了text-align:center时，在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象，其他正常，包括opera
解决：
在样式中设置line-height:100px
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
到此为止，我整理的有关于CSS的兼容性和JS的兼容性就在这里了，我感觉我所整理的这些东西也只是众多兼容性问题中的一些皮毛，更多的还有待我去发现解决总结。
1）列表不能换行的问题
问题：li设置为浮动，后面的li紧随其后，不能换行
解决：
在下一个li上清除浮动：clear:both
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
2）如何[b]对齐文本和文本输入框[/b]
问题：当input元素在设置了高时，在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象，其他正常，包括opera
解决：
vertical-align:middle;
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
3）容器宽度在浏览器中解释不同
问题：不同浏览器下宽度不同，比如说设置width：200px，在iE7、IE8、IE9下显示的是200px，在FF、Chrome、Opera中显示的是220px
解决：
用width:200px; *width:220px，其中iE7、IE8、IE9会识别两个宽度，以后者为准，故宽度为220px，在FF、Chrome、Opera中，识别第一个宽度，解析后显示宽度为220px
实例：
[html]
view plaincopy
<span style="font-size:18px;"></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></span>
4） Div居中问题
问题：IE7、IE8、IE9在设置了margin-left和margin-right为auto后，并不能使div居中显示，其他行
解决：
设定body居中，定义text-algin: center
实例：
[html]
view plaincopy
<span style="font-size:18px;"><body style="text-align:center;">
<div style="margin-left:auto;margin-right:auto; width:300px; height:200px; border:10px solid red;" >div居中问题解决
</div>
</body></span>
5） 字体大小问题
问题：对字体大小small的定义不同，在Firefox和Chrome中为small，而IE7、IE8、IE9中为16px，差别挺大
解决：
明确说明字体的大小，例如16px
实例：
[html]
view plaincopy
<span style="font-size:18px;"><body >
<p style="font-size:small;">p对象中的内容，此时字体大小为small</p>
<p style="font-size:16px;">p对象中的内容,此时字体大小固定为16px</p>
</div>
</body></span>
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;}
实例：
[html]
view plaincopy
<span style="font-size:18px;"> <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></span>
7） 层垂直居中
问题：层不能垂直居中
解决：
利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1px solid red;
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
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样式
实例：
[html]
view plaincopy
<span style="font-size:18px;"> <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></span>
9） td高度的问题
问题：在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。
解决：
暂无解决方法
其问题示例如下：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
10） li指定高度后，出现排版错误
问题：在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象
解决：
设置line-height
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
11） list-style-position默认值的问题
问题：IE7、FF、chrome、Opera默认的li的list-style-position属性为inside，而在IE8、IE9、IE10默认的是list-style-position:outside
解决：
将其显示的样式明确表示
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
12） 禁止选取网页内容
问题：在需要禁止选取网页的内容，FF用-moz-user-select:none，其他浏览器用onselectstart='return false'
解决：
FF：-moz-user-select:none
其他：onselectstart='return false'
实例：
[html]
view plaincopy
<span style="font-size:18px;"></head><body onselectstart ='return false' >
<div name="content" style="width:192px; -moz-user-select:none;" >
善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息，在easyui框架下向datagrid中导入数据，因为1.0版本中社河做过这个功能，参照他的代码完成了我这部分，根本思想是一样的：查找数据转换为json格式，再显示到窗体中。
</div>
</body></span>
13）如何对其文本和文本输入框的内容
问题：当input元素在设置了高和设置了text-align:center时，在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象，其他正常，包括opera
解决：
在样式中设置line-height:100px
实例：
[html]
view plaincopy
<span style="font-size:18px;"><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></span>
到此为止，我整理的有关于CSS的兼容性和JS的兼容性就在这里了，我感觉我所整理的这些东西也只是众多兼容性问题中的一些皮毛，更多的还有待我去发现解决总结。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- mysql正则表达式
- shell tee
- 转 static allocation in java - heap, stack and permanent generation
- 复杂json转换实体bean
- iOS 9变化的特性
- my.cnf 配置
- Java操作Cmd命令
- JVM内存分配与回收分析
- 英语翻译之路-4-20150924
- Windows编程命名规则
- JS+CSS实现简易的滑动门效果代码
- Sql表注释
- Sql表注释
- DeleteFile
- C++ 单例模式
- c#多线程 Invoke方法的使用
- URI跳转方式地图导航的代码实践
- 黑马程序员——Java基础（一）之Java概述
- iOS 9 适配
- 个人学习笔记---文件系统的实现