兼容性

我是小小朋友

于 2017-02-01 00:24:43 发布

阅读量198

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u013556505/article/details/54802651

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

IE6下子元素撑开父级宽度

在IE67下元素浮动，如果宽度需要内容撑开，就给里面的块元素都加浮动

在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动

p中嵌套h，就会出现2个p标签

IE6下最小高度问题
在IE6下元素的高度小于19px的时候，会被当做19px来处理
解决办法:overflow:hidden;

1px dotted 在IE6下不支持
解决办法:切背景平铺，例如变成2px？

<!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:加zoom:1;

	或者给其一加上浮动
	或者overflow:hidden;zoom:1;
*/
</style>
</head>
<body>
<div class="box">
	<div class="div"></div>
</div>
</body>
</html>

IE6下双边距BUG
在IE6，块元素有浮动和和横向的margin值，横向的margin值会被放大成两倍
解决办法: display:inline;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ float:left;border:10px solid #000;}
.box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}
/*
	margin-right 一行右侧第一个元素有双边距
	
	margin-left 一行左侧第一个元素有双边距
*/
</style>
</head>
<body>
<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}
a{width:100px;float:left;height:30px;background:Red;}
span{width:100px;float:right;height:30px;background:blue;}
/*
	在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
	解决办法:
		1.给li加浮动
		2.给li加vertical-align
*/
</style>
</head>
<body>
<ul>
	<li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
</ul>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;}
a{width:100px;float:left;height:12px;background:Red;}
span{width:100px;float:right;height:12px;background:blue;}
/*
	在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
	解决办法:
		1.给li加浮动
		2.给li加vertical-align
		
		当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动 别忘记解决最小高度问题应加上overflow:hidden

*/
</style>
</head>
<body>
<ul>
	<li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
    <li>
    	<a href="#"></a>
        <span></span>
    </li>
</ul>
</body>
</html>

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

文字溢出bug

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
</head>
<body>
<div class="box">
	<div class="left"></div>
    <div><!-- IE6下的文字溢出BUG --><span></span></div>
    <div class="right">↓leo是个大胖子</div>
</div>
<!--
	在IE6下的文字溢出BUG
    
    子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
    
    解决办法:用div把注释或者内嵌元素用div包起来	
-->
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}/*IE6下双边距bug
在IE6下，块元素有浮动和横向的margin，横向的margin会被放大2倍
解决办法：display：inline*/
/*
	当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
	解决办法:
		给定位元素外面包个div
*/
</style>
</head>
<body>
<div class="box">
	<ul></ul>
    <div><span></span></div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; overflow:auto; position:relative;}
.div{ width:150px;height:300px;background:yellow; position:relative;}
/*
	在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
	
	解决办法: 给父级也加相对定位
*/
</style>
</head>
<body>
<div class="box">
	<div class="div"></div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:201px;height:201px;border:1px solid #000; position:relative;}
.box span{ width:20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}
/*
	在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差 无法解决
*/
</style>
</head>
<body>
<div class="box">
	<span></span>
</div>
</body>
</html>

不要给tbody，tr，th同时加样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}/*32+2?*/
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
	
	在IE6，7下输入类型的表单控件加border:none;
	
	解决办法: 重置input的背景
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
/*
	在IE6，7下输入类型的表单控件上下各有1px的间隙
	
	解决办法:给input加浮动
	
	在IE6，7下输入类型的表单控件加border:none;
	
	解决办法: 重置input的背景
	
	在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动
	
	解决办法: 把背景加给父级
*/
</style>
</head>
<body>
<div class="box">
	<input type="text" />
</div>
</body>
</html>

我是小小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容性

IE6下子元素撑开父级宽度在IE67下元素浮动，如果宽度需要内容撑开，就给里面的块元素都加浮动在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动p中嵌套h，就会出现2个p标签IE6下最小高度问题在IE6下元素的高度小于19px的时候，会被当做19px来处理解决办法:overflow:hidden;1px dott
复制链接

扫一扫