首页技术博客 PHP教程数据库技术前端开发 HTML5 Nginx php论坛

新用户注册 | 会员登录

热门标签 | HotTags

当前位置: 开发笔记 > 前端 > 正文

IE浏览器下常见的CSS兼容问题

作者：撩人的东莞博文 | 来源：互联网 | 2023-05-19 05:33

目录[1]宽高bug[2]边框bug[3]盒模型bug[4]列表项bug[5]浮动bug[6]定位bug[7]表单bug宽高bug【1】IE6-浏览器下子元素能撑开父级设置好的宽高<

宽高bug

　　【1】IE6-浏览器下子元素能撑开父级设置好的宽高

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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">testli>
    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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<style>
body{
    margin: 0;
}
img{
    height: 300px;
    width: 300px;
    background-color:#ccc;
}
style>
head>
<body>
<a href="#"><img src="#">a>
body>    
html>

盒模型bug

　　【1】IE7-浏览器下父级有边框，无法阻止子元素的上下margin值传递

　　【解决】触发父级的haslayout

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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="float: left">1231span>
    li>
    <li class="in">
        <span style="float: left">1232span>
    li>
ul>
body>    
html>

　　【2】(li下的4px间隙和最小高度共存的问题)IE7浏览器下，当li下的4px间隙问题和最小高度问题共存的时候，设置垂直对齐方式无效
　　【解决】给li加浮动

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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">1231span>
    li>
    <li class="in">
        <span class="span">1232span>
    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>Documenttitle>
<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">1231span>
    li>
    <li class="in">
        <span class="span">1232span>
    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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
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>Documenttitle>
<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>Documenttitle>
<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-浏览器下输入类型表单控件如、<input>等输入文字时，背景图像会跟着文字一起滚动 　　【解决】把背景加给父级，并清掉自身背景 <pre>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> </pre> 　　【5】IE6-浏览器中select控件无法被<div>覆盖，因为在IE6中select控件是处于最顶层的。 　　【解决】iframe比select优先级高，把iframe嵌套在<div>里面，并设置为不可见 <pre>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> </pre> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

json
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
js
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
js
为什么在main.js中写import不会全局生效？

本文讨论了为什么在main.js中写import不会全局生效的问题，并提供了解决方案。在每一个vue文件中都需要写import语句才能使其生效，而在main.js中写import语句则不会全局生效。本文还介绍了使用Swal和sweetalert2库的示例。 ... [详细]

蜡笔小新 2023-12-14 12:29:43
js
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
js
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
js
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
js
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
focus
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
js
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
js
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
js
测试人的性格，点火让他着急，考验婚姻问题的善意玩人

本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

蜡笔小新 2023-12-14 09:10:09
react
安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]

蜡笔小新 2023-12-14 05:55:08
js
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
js
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
js
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25

撩人的东莞博文

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章