Maison > interface Web > tutoriel HTML > le corps du texte

IE6下什么情况才会出现双倍边距问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:41:30
original
1055 Les gens l'ont consulté

IE6下什么情况才会出现双倍边距问题:
只有知道问题出现的原因,才能够在出现问题前有意识的去避免问题的发生,或者能够第一时间查找到问题的所在。下面简单介绍一下IE6浏览器在什么情况下才会出现双边距问题。
下面看个例子:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent {  width:200px;  height:200px;  border:1px solid blue;}.children {  float:left;  width:100px;  height:100px;  border:1px solid red;  margin-left:10px;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>
Copier après la connexion

以上代码中,子div的左边距出现了加倍现象。也就是说当对象的浮动方向和外边距的方向一致时候会产生外边距加倍现象。
再来看一个例子:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent {  width:400px;  height:200px;  border:1px solid green;  overflow:hidden;}.left {  width:100px;  height:50px;  border:1px solid blue;  float:left;  margin-left:10px;}.middle {  width:100px;  height:50px;  border:1px solid blue;  float:left;  margin-left:10px;}.right {  width:80px;  height:50px;  border:1px solid red;  float:left;  margin-left:10px;}</style></head><body><div class="parent">  <div class="left"></div>  <div class="middle"></div>  <div class="right"></div></div></body></html>
Copier après la connexion

在上面的代码中,IE6浏览器下只有第一个子div产生了双倍边距现象,而第二个、第三个都没有产生,于是我们可以得出,在同一行的浮动div只有第一个可能产生双倍边距。
根据上面两个现象我们可以总结得出,对象浮动方向与外边距方向一致且是同一行中的中第一个浮动对象才会产生双倍边距。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/499.html

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal