ホームページ >ウェブフロントエンド >htmlチュートリアル >IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose
IE ブラウザーでの一般的な CSS 互換性の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:051616ブラウズ
幅と高さのバグ
【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-ブラウザ配下の最小高さの問題browser, set ( 0-15px) 高さが 15px 以下の要素は、IE6 では 15px として扱われます
[1] font-size を 0 に設定しますが、最小の高さは 2px です
[2] オーバーフローを設定します:非表示ですが、最小の高さは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> 境界線のバグ
【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ブラウザでは背景がパディング領域までしか伸びません
<!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ブラウザの場合 194d5407142ce68d0f1bf467f2c6e59f包起来
<!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属性，不支持仅仅包含d5fd7aea971a85678ba271703566ebfd的写法
【解决】使用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-浏览器下输入类型表单控件如4750256ae76b6b9d804861d8f69e79d3、d5fd7aea971a85678ba271703566ebfd等输入文字时，背景图像会跟着文字一起滚动
【解决】把背景加给父级，并清掉自身背景
<!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控件无法被dc6dce4a544fdca2df29d5ac0ea9906b覆盖，因为在IE6中select控件是处于最顶层的。
【解决】iframe比select优先级高，把iframe嵌套在dc6dce4a544fdca2df29d5ac0ea9906b里面，并设置为不可见
<!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>