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

1）列表不能换行的问题

问题：

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

解决：

实例：

 
 一级标题
  
 
    
二级标题 
 
    
 二级标题
 
  
 
 
 一级标题
  
 
    
 二级标题
 
    
 二级标题
 
  
 
 

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

问题：

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

解决：

vertical-align:middle;

实例：

修正前：

用户名
密码





修正后：
用户名
密码

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

问题：

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

解决：

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

实例：

修正前：
　
点我，看看有什么不同！

修正后：
　
点我，看看有什么不同！

4） Div居中问题

问题：

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

解决：

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

实例：

　
p居中问题解决

5） 字体大小问题

问题：

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

解决：

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

实例：

	
p对象中的内容，此时字体大小为small
　
	
p对象中的内容,此时字体大小固定为16px

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;}

　　


	 
最小宽度问题
	 

	 
最小宽度问题
	 解决方法：
	 
最小宽度问题
	 

	 
最小宽度问题

7） 层垂直居中

问题：

层不能垂直居中

解决：

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

实例：

 
层垂直居中问题
 

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

问题：

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

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

解决：

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

　　


解决前：
	 

	
嵌套p标签的居中问题
	


解决后：
	 

	
嵌套p标签的居中问题
	

9） td高度的问题

问题：

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

解决：

暂无解决方法

其问题示例如下：

设置line-height:20px




设置height:20px

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

问题：

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

解决：

设置line-height

实例：

 
解决前：
hello
hello
hello
hello
解决后：
hello
hello
hello
hello

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

问题：

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

解决：

将其显示的样式明确表示

实例：

 
解决前：
hello
hello

解决后：
hello
hello

12） 禁止选取网页内容

问题：

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

解决：

FF：-moz-user-select:none

其他：onselectstart='return false'

实例：

 

善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息，在easyui框架下向datagrid中导入数据，因为1.0版本中社河做过这个功能，参照他的代码完成了我这部分，根本思想是一样的：查找数据转换为json格式，再显示到窗体中。

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

问题：

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

解决：

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

实例：

修正前：

用户名
密码





修正后：
用户名
密码