css-兼容性问题及解决（一）_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

css-兼容性问题及解决（一）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

css-兼容性问题及解决(一)

1：在IE6下元素的高度的小于19px的时候，会被当做19px来处理

解决办法: overflow:hidden;

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{height:2px;background:red;overflow:hidden;} 8 /* 9  IE6下最小高度问题10  在IE6下元素的高度的小于19px的时候，会被当做19px来处理11  解决办法:overflow:hidden;12 */13 </style>14 </head>15 <body>16 <div class="box"></div>17 </body>18 </html>

2： 1px dotted 在IE6下不支持　　

解决：切背景平铺

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{ width:100px;height:100px;border:1px dotted #000;} 8 /* 9  1px dotted 在IE6下不支持10  解决办法:切背景平铺11 */12 </style>13 </head>14 <body>15 <div class="box"></div>16 </body>17 </html>

3：在IE6下父级有边框的时候，子元素的margin值消失，在IE6下解决margin传递要触发haslayout

解决办法:触发父级的haslayout

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body{margin:0;}.box{background:blue;border:1px solid #000;zoom:1;}.div{width:200px;height:200px;background:red;margin:100px;}/* 在IE6下解决margin传递要触发haslayout 在IE6下父级有边框的时候，子元素的margin值消失 解决办法:触发父级的haslayout*/</style></head><body><div class="box"> <div class="div"></div></div></body></html>

IE6下子元素margin值失效

触发haslayout

4：IE6下双边距BUG ，也就是说，在IE6下块元素有浮动和横向的margin值，横向的margin值会被放大成两倍

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body{margin:0;} 8 .box{width:200px;height:200px;background:Red;float:left;margin:100px;display:inline;} 9 /*10  IE6下双边距BUG11  在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍12  解决办法: display:inline;13 */14 </style>15 </head>16 <body>17 <div class="box"></div>18 </body>19 </html>

5：在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙

解决办法:

1.给li加浮动，并且要加上宽度

2.给li加vertical-align

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:30px;border:1px solid #000;vertical-align:top; } 9 a{width:100px;float:left;height:30px;background:Red;}10 span{width:100px;float:right;height:30px;background:blue;}11 /*12  在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13  解决办法:14   1.给li加浮动 ，并且要加上宽度15   2.给li加vertical-align16 */17 </style>18 </head>19 <body>20 <ul>21  <li>22      <a href="#"></a>23         <span></span>24     </li>25     <li>26      <a href="#"></a>27         <span></span>28     </li>29     <li>30      <a href="#"></a>31         <span></span>32     </li>33 </ul>34 </body>35 </html>

ie6,7下

<strong>vertical-align:top</strong>

6：在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙,如果和最小高都问题并存的时候，也要个li加浮动

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;} 9  9 a{width:100px;float:left;height:12px;background:Red;}10 span{width:100px;float:right;height:12px;background:blue;}11 /*12  在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13  解决办法:14 1.给li加浮动并且要加上宽度15 2.给li加vertical-align16 17 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动18 */19 </style>20 </head>21 <body>22 <ul>23     <li>24         <a href="#"></a>25         <span></span>26     </li>27     <li>28         <a href="#"></a>29         <span></span>30     </li>31     <li>32         <a href="#"></a>33         <span></span>34     </li>35 </ul>36 </body>37 </html>

7：当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

解决办法:精确计算父级和子元素的宽度

或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{border:10px solid #000;width:600px; overflow:hidden;} //清浮动 8 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left;  9 display:inline;} //双边距bug10 /* 11 不满行状态的时候,最后一行子元素的下margin在IE6下就会失效12 */13 </style>14 </head>15 <body>16 <div class="box">17  <div>1</div>18     <div>2</div>19     <div>3</div>20     <div>4</div>21     <div>1</div>22     <div>2</div>23     <div>3</div>24     <div>4</div>25     <div>1</div>26     <div>2</div>27     <div>3</div>28 </div>29 </body>30 </html><br />

当一行子元素占有的宽度之和和父级的宽度相差超过3px,最后一行子元素的下margin在IE6下就会失效

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{border:10px solid #000;width:604px; overflow:hidden;} //清浮动 8 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left;  9 display:inline;} //双边距bug10 /*11  当一行子元素占有的宽度之和和父级的宽度相差超过3px,最后一行子元素的下margin在IE6下就会失效12 */13 </style>14 </head>15 <body>16 <div class="box">17  <div>1</div>18     <div>2</div>19     <div>3</div>20     <div>4</div>21     <div>1</div>22     <div>2</div>23     <div>3</div>24     <div>4</div>25     <div>1</div>26     <div>2</div>27     <div>3</div>28     <div>4</div>29 </div>30 </body>31 </html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles