"专业 CSS兼容IE和Firefox技巧集合"
!DOCTYPE html> <html> <head> <style type="text/css"> .div1{float:left; margin:20px;} .div2{float:left; margin:20px; display:inline;} </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> </body> </html> 3.双边距 在 ie6 下面设置了 margin 和 float,还会出现一个叫双边距的 bug。解决方案是将 display:inline; 样式加到这个 div 里。 4.列表导航的不同表现 在火狐中~浮动宽度等于的li的溢出隐藏 <!DOCTYPE html> <html> <head> <style type="text/css"> .menu{overflow:hidden;} .menu li{float:left; margin:5px;} </style> </head> <body> <ul class="menu"> <li>li1</li> <li>li2</li> </ul> </body> </html> 5.min-height的表现 在 ie 中有一个 min-height 的表现是在 ie 下要设置的 height:100% 否则无效 6.链接问题 a 链接没办法改变 a 链接的高和宽 边框设置了之后背景颜色也设了,但是在 ie 下的 a 链接不会撑开盒子。 ie6 需要加上 display:block 或 float:left; 7.浮动 在 ie 中有个浮动不清的问题 当父级 div 上没有设置高度,而里面的子 div 设置了 float 就会出问题,容易清除的方法是设置父级 div 的 overflow:hidden 属性 8.border的加倍 在 ie 下边界的 doubled 是因为 border-style:dashed的值让边界加倍。此时改成其他值会正常显示单条边框 9.列表中的span bug 在 ie 中一个列表加上 span 标签,前面会多出一个列表表现。解决也可以在 span 标签中加上 display:block 解决 10.css hack 笼统来说就是识别不同浏览器的技巧方法 如下图所示: <!DOCTYPE html> <html> <head> <style type="text/css"> .width{width:200px;}/*正常浏览器*/ * html .width{width:180px;} /*只有IE6执行*/ </style> </head> <body> <div class="width"> <span>我是200px宽的容器</span> </div> <body> <html> 这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题,确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧,就能够更加轻松地应对不同浏览器的兼容性问题,提高网页的用户体验。因此,对于有关CSS兼容性的问题,建议网页设计师和开发人员积极学习并熟练掌握这些技巧,以便更好地在实际工作中应用。
![](https://csdnimg.cn/release/download_crawler_static/2789346/bgb.jpg)
![](https://csdnimg.cn/release/download_crawler_static/2789346/bgc.jpg)
![](https://csdnimg.cn/release/download_crawler_static/2789346/bgd.jpg)
剩余63页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/14e7f528945b4335a7f5c2efbf8ba463_fyboyz.jpg!1)
- 粉丝: 240
- 资源: 11
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)