程序博客网 > 淘宝直播中控台网址

web开发中有关浏览器兼容问题及其解决方案的记录

来源：互联网 发布：淘宝直播中控台网址 编辑：程序博客网 时间：2024/05/01 13:27
在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明，现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。

1）列表不能换行的问题

问题：

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

解决：

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

实例：   

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type=text/css>  
  2. #one{  
  3. float:left;  
  4. }  
  5. #two{  
  6. clear:left;  
  7. }  
  8. </style>  
  9. </head>  
  10. <body>   
  11. <li  id="one"> 一级标题  
  12.   <div id="onediv">   
  13.     <ul  id="oneli">二级标题 </ul>   
  14.     <ul id="oneli"> 二级标题</ul>   
  15.   </div>   
  16. </li>   
  17. <li id="two"> 一级标题  
  18.   <div>   
  19.     <ul> 二级标题</ul>   
  20.     <ul> 二级标题</ul>   
  21.   </div>   
  22. </li>   
  23. </body></span>  

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

问题：

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

解决：

        vertical-align:middle;

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type="text/css">  
  2. 　 .in{  
  3. 　　width:200px;  
  4. }  
  5. .alter  
  6. {  
  7. 　　width:200px;  
  8. 　　vertical-align:middle;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div>修正前：</div>  
  14. <div>  
  15. 用户名<input name="用户名" type="text" class="in" style="height:100px; ">  
  16. 密码<input name="密码" type="text"  class="in" style="height:100px; "  >  
  17. </div>  
  18. <br/>  
  19. <br/>  
  20. <div>修正后：</div>  
  21. <div>用户名<input name="用户名" type="text" class="alter" style="height:100px; "  >  
  22. 密码<input name="密码" type="text"  class="alter" style="height:100px; " ></div>  
  23. </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在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"></head>  
  2. <body>  
  3. 修正前：  
  4. 　<div style="border:10px solid red;width:200px;height:200px;cursor:pointer;" onclick="alert(this.offsetWidth)" >点我，看看有什么不同！  
  5. </div>  
  6. 修正后：  
  7. 　<div  style="border:10px solid red;width:200px; *width:220px; height:200px;cursor:pointer; " onclick="alert(this.offsetWidth)" >点我，看看有什么不同！  
  8. </div>  
  9. </body></span>  

4） Div居中问题

问题：

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

解决：

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

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><body style="text-align:center;">  
  2. 　<div style="margin-left:auto;margin-right:auto; width:300px; height:200px; border:10px solid red;" >div居中问题解决  
  3. </div>  
  4. </body></span>  

5） 字体大小问题

问题：

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

解决：

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

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><body >  
  2.     <p style="font-size:small;">p对象中的内容，此时字体大小为small</p>　  
  3.     <p style="font-size:16px;">p对象中的内容,此时字体大小固定为16px</p>  
  4. </div>  
  5. </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在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">　　<style type="text/css">  
  2. #box{ width: 100px; height: 35px;}  
  3. html>body #box{ width:auto; height:auto; width:100px; min-height:35px;}   
  4. 　　</style>  
  5. </head>  
  6. <body >  
  7.      <div style="border:1px solid red; width:150px; height:35px;">最小宽度问题</div>  
  8.      <br/>  
  9.      <div style="border:1px solid red; width:150px; min-height:35px;">最小宽度问题</div>  
  10.      解决方法：  
  11.      <div id="box" style="border:1px solid red;">最小宽度问题</div>  
  12.      <br/>  
  13.      <div id="box" style="border:1px solid red;">最小宽度问题</div>  
  14. </div>  
  15. </body></span>  

7） 层垂直居中

问题：

         层不能垂直居中

解决：

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

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type="text/css">  
  2. #hello{  
  3. position:absolute;  
  4. top:50%;  
  5. left:50%;  
  6. margin:-100px;  
  7. width:200px;  
  8. height:200px;  
  9. border:1px solid red;  
  10. }  
  11. 　　</style>  
  12. </head><body>   
  13. <div id="hello">层垂直居中问题</div>   
  14. </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在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">　　<style type="text/css">  
  2.  .alter{  
  3.  width:150px; height:50px;   
  4.   
  5.  }  
  6. 　　</style>  
  7. </head>  
  8. <body >  
  9. 解决前：  
  10.      <div style="border:1px solid red; width:300px; height:100px;text-align:center;">  
  11.     <div style="border:1px solid red; width:150px; height:50px;">嵌套div标签的居中问题</div>  
  12.     </div>  
  13. </div>  
  14. 解决后：  
  15.      <div style="border:1px solid red; width:300px; height:100px;text-align:center;">  
  16.     <div style="border:1px solid red; width:150px; height:50px; margin:0 auto;">嵌套div标签的居中问题</div>  
  17.     </div>  
  18. </body></span>  

9） td高度的问题

问题：

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

解决：

       暂无解决方法

其问题示例如下：   

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><body >  
  2. <table>  
  3. <tr>  
  4. <td style="line-height:20px; border:5px solid red;">设置line-height:20px</td>  
  5. </tr>  
  6. </table>  
  7. <table>  
  8. <tr>  
  9. <td style="height:20px; border:5px solid red;">设置height:20px</td>  
  10. </tr>  
  11. </table>  
  12. </body></span>  

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

问题：

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

解决：

       设置line-height

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type="text/css">  
  2. li{  
  3. list-style-position:inside;  
  4. }  
  5. 　　</style>  
  6. </head><body >   
  7. 解决前：  
  8. <li style="height:40px;">hello</li>  
  9. <li style="height:40px;">hello</li>  
  10. <li style="height:40px;">hello</li>  
  11. <li style="height:40px;">hello</li>  
  12. 解决后：  
  13. <li style="line-height:40px;">hello</li>  
  14. <li style="line-height:40px;">hello</li>  
  15. <li style="line-height:40px;">hello</li>  
  16. <li style="line-height:40px;">hello</li>  
  17. </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在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type="text/css">  
  2. li{  
  3.     list-style-position:inside;  
  4. }  
  5. 　　</style>  
  6. </head><body >   
  7. <div>解决前：  
  8. <li >hello</li>  
  9. <li >hello</li>  
  10. </div>  
  11. <div>解决后：  
  12. <li >hello</li>  
  13. <li >hello</li>  
  14. </div>  
  15. </body></span>  

12） 禁止选取网页内容

问题：

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

解决：

       FF：-moz-user-select:none

       其他：onselectstart='return false'

实例：

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

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

问题：

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

解决：

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

实例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style type="text/css">  
  2. 　 .in{  
  3. 　　width:200px;  
  4. }  
  5. .alter  
  6. {  
  7. 　　width:200px;  
  8. 　　vertical-align:middle;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div>修正前：</div>  
  14. <div>  
  15. 用户名<input name="用户名" type="text" class="in" style="height:100px; line-height:100px;text-align:center;" value="zhudan" >  
  16. 密码<input name="密码" type="text"  class="in" style="height:100px; line-height:100px;text-align:center;"  value="zhudan">  
  17. </div>  
  18. <br/>  
  19. <br/>  
  20. <div>修正后：</div>  
  21. <div>用户名<input name="用户名" type="text" class="alter" style="height:100px; line-height:100px;text-align:center;" value="zhudan" >  
  22. 密码<input name="密码" type="text"  class="alter" style="height:100px; line-height:100px;text-align:center;" value="zhudan"></div>  
  23. </body></span>  
        到此为止，我整理的有关于CSS的兼容性和JS的兼容性就在这里了，我感觉我所整理的这些东西也只是众多兼容性问题中的一些皮毛，更多的还有待我去发现解决总结。
0 0
淘宝直播中控台网址 淘宝直播中控台网址
原创粉丝点击
热门IT博客
2017天猫双11实时数据2017天猫双11实时数据
志强软件志强软件
淘宝 雅诗兰黛 小样 假
网络心理咨询师招聘
潜龙勿用谢霆锋 知乎
windows桌面壁纸
java base64编码
macbook视频拼接软件
佶天鸿网络俱乐部招聘
淘宝一件代发有人下单
淘宝网男士运动卫衣
ubuntu睡眠后无法唤醒
ubuntu切换到root
知乎杀人案烟锁殡仪馆
mysql 事务 存储过程
淘宝购物怎么索要发票
win10如何优化更流畅
专业物流软件
阐释者淘宝
单片机如何调试
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 晚上头痒 脚心痒有红点 头发油头皮痒怎么办 脚痒的难受怎么办 头痒头皮多怎么办 脚特别痒怎么办 为什么头总是痒 头很痒怎么办 头痒原因 脚底小水泡痒 洗完头头皮还痒怎么办 头痒头屑多 头老是痒怎么回事 脚很痒怎么办 刚洗完头就痒 头总是痒是怎么回事 小孩头痒怎么办 头老痒怎么办 鼻子头痒怎么回事 头痒出油 脚起皮痒 脚脱皮又痒 止头痒 头特别痒 头痒有小疙瘩 脚脱皮痒 儿童头痒怎么办 眼头痒 头很痒 头特别痒怎么办 头一直痒 脚痒起水泡 头痒掉发用什么洗发水 头痒是为什么 头痒脱发是什么原因 屁眼红痒 头容易痒 孩子头痒 头痒有头皮屑怎么办 腿上小红点痒 头总是痒

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里