宽高bug
【1】IE6-浏览器下子元素能撑开父级设置好的宽高
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ height: 300px; width: 300px; background-color: #ccc; border: 10px solid black;}.in{ height: 400px; width: 100px; background-color: red; margin: 10px; padding: 10px; border: 1px solid black;}</style></head><body><div class="box" id="box"> <ul class="list" id="list"> <li class="in" id="test">test</li> </ul> </div></body> </html>
【2】IE6-浏览器下最小高度问题，设置(0-15px)高度小于等于15px的元素，在IE6下会被当作15px来处理
【解决】
[1]设置font-size为0，但最小高度为2px
[2]设置overflow:hidden，但最小高度为1px
[3]要想实现最小高度为0，只能是不设置高度
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.box{ height: 0px; background-color: #ccc;}</style></head><body><div class="box" id="box"></div></body> </html>
边框bug
【1】IE6-浏览器下1px的点线边框，点线会变成虚线
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.box{ height: 300px; width: 300px; background-color: #ccc; border: 1px dotted black;}</style></head><body><div class="box" id="box"></div></body> </html>
【2】标准下背景会延伸到边框区，而IE7-浏览器下背景只延伸到padding区
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.box{ height: 300px; width: 300px; background-color:#ccc; border: 10px dashed red;}</style></head><body><div class="box" id="box"></div></body> </html>
【3】在IE10-浏览器下被标签包含的
元素会产生边框
【解决】给图片设置{border: none}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}img{ height: 300px; width: 300px; background-color:#ccc;}</style></head><body><a href="#"><img src="/static/imghwm/default1.png" data-src="#" class="lazy" alt="IE浏览器下常见的CSS兼容问题_html/css_WEB-ITnose" ></a></body> </html>
盒模型bug
【1】IE7-浏览器下父级有边框，无法阻止子元素的上下margin值传递
【解决】触发父级的haslayout
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ border: 10px solid black; background-color: red;}.in{ height: 100px; width: 100px; margin-top: 50px; background-color: blue;}</style></head><body><ul class="list"> <li class="in"></li></ul></body> </html>
【2】IE7-浏览器下不设置文档声明会导致怪异盒模型解析。在怪异盒模型下内容宽=width-2*padding-2*borderWidth
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.box{ height: 100px; width: 100px; border: 40px solid black; background-color: red;}</style></head><body><div class="box" id="box"></div></body> </html>
【3】IE6-浏览器下使用margin负值，使元素移出父级，移出部分会被父级裁掉
【解决】给子级加相对定位relative
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ margin-left: 100px; height: 300px; width: 300px; background-color: #ccc;}.in{ margin-left: -30px; height: 100px; width: 100px; background-color: red;}</style></head><body><ul class="list"> <li class="in"></li></ul></body> </html>
LIbug
【1】(li的4px空隙bug)IE7-浏览器下，li本身没浮动，但内容有浮动，li下边会多出4px的空隙
【解决】
[1]给li加浮动
[2]设置vertical-align
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 200px; background-color: lightgreen;}.in{ height: 100px; background-color: lightblue;}</style></head><body><ul class="list"> <li class="in"> <span style="max-width:90%">1231</span> </li> <li class="in"> <span style="float: left">1232</span> </li></ul></body> </html>
【2】(li下的4px间隙和最小高度共存的问题)IE7浏览器下，当li下的4px间隙问题和最小高度问题共存的时候，设置垂直对齐方式无效
【解决】给li加浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 200px; background-color: lightgreen;}.in{ height: 12px; background-color: lightblue; overflow: hidden; vertical-align: middle;}.span{ float: left;}</style></head><body><ul class="list"> <li class="in"> <span class="span">1231</span> </li> <li class="in"> <span class="span">1232</span> </li></ul></body> </html>
【3】(li的3px空隙bug)IE7-浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block，li下会多出3px的垂直间距
【解决】触发li中子元素的haslayout
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 200px; background-color: lightgreen;}.in{ height: 100px; background-color: lightblue;}.span{ display: block;}</style></head><body><ul class="list"> <li class="in"> <span class="span">1231</span> </li> <li class="in"> <span class="span">1232</span> </li></ul></body> </html>
浮动bug
【1】(3pxbug)在IE6-浏览器下浮动元素和非浮动元素相邻时，会出现3px像素的空隙
【解决】
[1]使用CSShack，给浮动元素设置相反方向的-3px的margin值，将非浮动元素的相应方向的margin设为0(加IE6前缀)
[2]去掉非浮动元素的margin值，加浮动。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.box{ width: 100px; height: 100px;}#box1{ float: left; background-color: red; _margin-right:-3px; border-right: 1px solid green;}#box2{ margin-left: 100px; _margin-left: 0; border:1px solid black; background-color: blue; }</style></head><body><div class="box" id="box1"></div><div class="box" id="box2"></div></body> </html>
【2】IE6-下父元素浮动后，且子元素设置了高度，如果父元素不设置宽度，宽度会撑满整行
【解决】
[1]给浮动的父元素设置宽度
[2]给子元素设置宽度
[3]给子元素设置浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ float: left; background-color: green;}.in{ height: 100px; background-color: yellow;}</style></head><body><ul class="list"> <li class="in">我是内容</li></ul></body> </html>
【3】(浮动折行)在IE7-浏览器下，如果两个元素一个右浮动，一个不浮动。浮动元素会折到下一行
【解决】
[1]给不浮动的元素也加浮动
[2]在HTML中先放右浮动的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 500px; background-color: lightgreen; overflow: hidden;}.in{ width: 100px; height: 100px;}.in1{ background-color: lightyellow;}.in2{ background-color: lightblue; float: right;}</style></head><body><div class="list"> <span class="in in1">我是不浮动</span> <span class="in in2">我是右浮动</span></div></body> </html>
【4】(双边距bug)IE6-浏览器下块元素有浮动，且有横向的margin值。若仅有左margin，最左边的浮动的块元素的左margin会放大成两倍。若仅有右margin，最右边的浮动的块元素的右margin会放大成两倍。若左右都有，最左边的左margin和最右边的右margin会放大成两倍。
【解决】给块元素设置display:inline
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ float: left; background-color: #ccc;}.in{ float:left; width: 100px; height: 100px;}.in1{ background-color: lightgreen; margin-left: 50px;}.in2{ background-color: lightyellow;}.in3{ background-color: lightblue; margin-right: 50px;}</style></head><body><ul class="list"> <li class="in in1"></li> <li class="in in2"></li> <li class="in in3"></li></ul></body> </html>
【5】(margin-bottomBUG)在IE7-浏览器下父级宽度和每行元素的宽度之和相差超过3px时，或者有不满行的情况，最后一行的margin-bottom失效
【解决】尽量不要用margin-bottom，而用margin-top代替
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 350px; overflow: hidden; background-color: #ccc;}.in{ float:left; width: 100px; height: 100px; margin-bottom: 10px; margin-right: 10px; background-color: lightgreen;}</style></head><body><ul class="list"> <li class="in"></li> <li class="in"></li> <li class="in"></li> <li class="in"></li> <li class="in"></li></ul></body> </html>
【6】(文字溢出bug)IE6-浏览器下两个浮动元素(浮动元素不能是li)一个左浮无宽度，另一个右浮动宽度与父级宽度相差不超过3px，浮动元素中间有注释或者内联元素，文字就被复制
【解决】
[1]将注释去掉
[2]将内联元素变成块元素
[3]内联元素及注释整个用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ width: 200px;}.in1{ float:left;}.in2{ float:right; width:198px;}</style></head><body><div class="list"> <div class="in1"></div> <!-- 我是--><span></span><!-- 我是 --><!-- 我是 --> <div class="in2">多出来的一头猪吗</div></div></body> </html>
定位bug
【1】在IE7-浏览器下子元素有相对定位，父级的overflow无效
【解决】给父级也设置相对定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ background-color: lightgreen; width: 200px; height: 100px; overflow: auto;}.in{ position: relative; width: 100px; height: 300px; background-color: lightblue;}</style></head><body><ul class="list"> <li class="in"></li></ul></body> </html>
【2】在IE6-浏览器下浮动元素和绝对定位元素是并列关系，且浮动元素设置margin-left和width的和正好等于父元素的宽度，这时绝对定位元素会消失
【解决】给定位元素外面包一个div
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ background-color: lightgreen; width: 200px; height: 100px;}.in1{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: lightblue;}.in2{ float: left; margin-left: 100px; display: inline; width: 100px; height: 100px; background-color: pink; }</style></head><body><ul class="list"> <li class="in1">定位元素</li> <li class="in2">浮动元素</li></ul></body> </html>
【3】在IE6-浏览器下绝对定位元素的父级元素的宽度为奇数时，元素的right会有1px的偏差；高度为奇数时，元素的bottom会有1px的偏差
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.list{ position: relative; background-color: black; width: 199px; height: 199px;}.in{ position: absolute; right: 0; bottom: 0; width: 100px; height: 100px; background-color: lightblue;}</style></head><body><ul class="list"> <li class="in">定位元素</li></ul></body> </html>
表单bug
【1】IE6-浏览器下label标签只支持for属性，不支持仅仅包含的写法
【解决】使用for属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><label><input type="checkbox">label测试文字</label></body> </html>
【2】(input空隙问题)当input元素被div包围时，IE6-浏览器下它们之间上下会各多出1px的空隙；而IE7、8浏览器下它们之间的上边会多出1px的空隙
【解决】给input加浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}input{ margin: 0; padding: 0; border: none;}.box{ width: 202px; height: 32px; border: 1px solid black; background-color: red;}.ipt{ width: 200px; height: 30px; border: 1px solid #ccc;}</style></head><body><div class="box"> <input class="ipt"></div></body> </html>
【3】IE6-浏览器下当input元素被div包围时，在已经给input设置浮动的情况下，设置border:none无法得到理想效果
【解决】
[1]设置border:0
[2]重置input的背景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}input{ margin: 0; padding: 0; border: none;}.box{ width: 201px; height: 31px; border: 1px solid black; background-color: red;}.ipt{ width: 200px; height: 30px; border: none; float: left;}</style></head><body><div class="box"> <input class="ipt"></div></body> </html>
【4】IE7-浏览器下输入类型表单控件如
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}.test{ overflow: auto; background: url(img/bg.jpg) no-repeat; font-size: 50px; line-height: 60px; height: 200px; width: 500px;}</style></head><body><textarea class="test"></textarea></body> </html>
【5】IE6-浏览器中select控件无法被
【解决】iframe比select优先级高，把iframe嵌套在
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>input{ width: 100px; height: 100px; background-color: lightgreen;}.box{ width: 200px; height: 200px; position: absolute; top: 20px; left: 20px; background-color: pink;}</style></head><body><select class="select"> <option>test1</option> <option>test2</option> <option>test3</option></select><div class="box" id="box"><iframe style="width:50px; height:50px;border: 0; position: absolute; opacity = 0; filter:alpha(opacity=0)"></iframe></div></body> </html>
HTML 태그의 목적은 무엇입니까?Apr 28, 2025 am 12:02 AMhtmltagsareessentialforstructuringwebpages, 향상 액세스 가능성, SEO 및 성능
자체 폐쇄 태그는 무엇입니까? 예를 들어보세요.Apr 27, 2025 am 12:04 AMSelf-ClosingTagsinhtmlandxMlaretagsThatCloseThemselvess withoutseeparateClosingTag, 1) theareStement-well-formeddocuments.2) indugible-ustible butrr
HTML 너머 : 웹 개발을위한 필수 기술Apr 26, 2025 am 12:04 AM강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.
HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.
HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AMHTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.
HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AMHTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.
마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AMHTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AMHTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
드림위버 CS6
시각적 웹 개발 도구
