css-兼容性问题及解决（一）_html/css_WEB-ITnose
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>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7663
15
1393
52
1205
24
91
11
73
19
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 11:30 PM
웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...
CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까?
Apr 05, 2025 am 06:15 AM
이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구
Apr 09, 2025 am 12:12 AM
HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
