Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > IE6浮动撑开了父元素,怎么破?_html/css_WEB-ITnose

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

WBOY
Release： 2016-06-21 09:26:02
Original
1094 people have browsed it

<!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>
Copy after login

在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>
Copy after login

.ico{    width: 20px;    height: 20px;    background: blue;    display:inline-block;}
Copy after login

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

Related labels：
ie6 element float
source：php.cn
Previous article：类似这样的滚轴用什么方式能让它好看点？_html/css_WEB-ITnose Next article：div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...
From 2024-04-06 16:25:39
0
1
346
Compare Imagick, Adobe Photoshop and Windows - Detect resolution (pixels per centimeter or pixels per inch) This is not a question but an attempt to improve my understanding of how DPI is stored in ...
From 2024-04-06 16:01:27
0
1
397
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template