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

1)列表不能换行的问题

问题:

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

解决:

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

实例:



 
  • 一级标题
      二级标题
      二级标题
  • 一级标题
      二级标题
      二级标题
  • 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后,并不能使div居中显示,其他行

    解决:

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

    实例:

    
     
    div居中问题解决

    5) 字体大小问题

    问题:

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

    解决:

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

    实例:

    
    	

    p对象中的内容,此时字体大小为small

     

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