关于margin

最新推荐文章于 2023-03-01 08:44:37 发布

zxbcome

最新推荐文章于 2023-03-01 08:44:37 发布

阅读量90

点赞数

分类专栏： css相关文章标签： IE CSS HTML

本文链接：https://blog.csdn.net/zxbcome/article/details/83370737

版权

css相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

FF与IE的兼容性：
	1：FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。
	   （解决方案：float:left）
		.dealer {
			height:100px;
			width:400px;
			background-color:#ff0000;
 			}

 		.site {
			height:50px;
			width:200px;
			margin-left:auto;
			margin-right;auto;
			background-color:#ffffff;
 }
	2:  margin -top 负值 上移  ie6不正常
.dealer {
			position:absolute;
			top:20px;
			height:100px;
			width:400px;
			background-color:#ff0000;
 }

 .site {
			height:50px;
			width:200px;
			margin-top:-10px;
			background-color:#ffffff;
 }
	3: margin加倍的问题
　　	设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
　　	解决方案是在这个div里面加上display:inline;

		.dealer {
			float:left;
			height:100px;
			width:400px;
			background-color:#ff0000;
 }

 		.site {
			float:left;
			height:50px;
			width:200px;
			margin:15px;
			background-color:#000000;
 }

Padding：
.dealer {
			float:left;
			height:100px;	
			width:300px!important;
			width:400px;
			background-color:#ff0000;
			padding-left:100px;

 }

 		.site {
			float:left;
			height:50px;
			width:200px;
			margin-top:12px ;
			display:inline;
			background-color:#000000;
 		}

Test.html:
<html>
<head>
<title>Dealer Site not Found</title>

<style type="text/css">

 .dealer {
	float:left;
	height:100px;	
	width:300px!important;
	width:400px;
	background-color:#ff0000;
	padding-left:100px;

 }

 .site {
	float:left;
	height:50px;
	width:200px;
	margin-top:12px ;
	display:inline;
	background-color:#000000;
 }

  </style>
</head>
<body>
  <div class="dealer">
		<div class="site">aaaaaaaaaaaaaaaaaaaaa</div>
  </div>                 
</body>
</html>