communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > IE6浮动撑开了父元素,怎么破?_html/css_WEB-ITnose

IE6浮动撑开了父元素,怎么破?_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-21 09:26:02
original
1094 Les gens l'ont consulté

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Examples</title><style type="text/css">*{margin: 0;padding: 0;}.box{	padding: 10px  20px;	background: red;	color: #fff;	text-decoration: none;	float: left;}.ico{	width: 20px;	height: 20px;	background: blue;	float: right;}</style></head><body><a href="" class="box">怎么破<i class="ico"></i></a>    </body></html>
Copier après la connexion

在IE 6 7下撑开了, 其他正常 不想让它撑开. a 宽度不固定 i 在右边.
怎么破?
求解?
可以给文字外再包一层 可以解决 ,如果是这种结构的话有没有其他方法可以解决


回复讨论(解决方案)

你的父元素，非得用float吗？

a标签
display:block
试试看

a标签
display:block
试试看



不行

加个宽度。
demo here. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Examples</title>    <style type="text/css">        *{margin: 0;padding: 0;}        .box{            padding: 10px  20px;            background: red;            color: #fff;            text-decoration: none;            float: left;  width:78px;        }        .ico{            width: 20px;            height: 20px;            background: blue;            float: right;        }        .txt{ float:left;}    </style></head><body><a href="" class="box"><i class="txt">怎么破</i><i class="ico"></i></a></body></html>
Copier après la connexion

.ico{    width: 20px;    height: 20px;    background: blue;    display:inline-block;}
Copier après la connexion

子和父样式中添加position:absolute;同时在子样式中加入right:**px;(宽度自己定义)

Étiquettes associées：
ie6 元素 浮动
source：php.cn
Article précédent：类似这样的滚轴用什么方式能让它好看点？_html/css_WEB-ITnose Article suivant：div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose
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
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s...
Depuis 2024-04-06 16:25:39
0
1
346
Comparez Imagick, Adobe Photoshop et Windows - Détecter la résolution (pixels par centimètre ou pixels par pouce) Ce n'est pas une question mais une tentative d'améliorer ma compréhension de la façon dont...
Depuis 2024-04-06 16:01:27
0
1
397
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal