IE6浮动撑开了父元素,怎么破?_html/css_WEB-ITnose
<!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>在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>
.ico{ width: 20px; height: 20px; background: blue; display:inline-block;}子和父样式中添加position:absolute;同时在子样式中加入right:**px;(宽度自己定义)
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML、CSS和jQuery：制作一个带有浮动效果的按钮
Oct 24, 2023 pm 12:09 PM
HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中
在JavaFX中，有哪些不同的路径元素？
Aug 28, 2023 pm 12:53 PM
javafx.scene.shape包提供了一些类，您可以使用它们绘制各种2D形状，但这些只是原始形状，如直线、圆形、多边形和椭圆形等等...因此，如果您想绘制复杂的自定义形状，您需要使用Path类。Path类Path类使用此表示形状的几何轮廓您可以绘制自定义路径。为了绘制自定义路径，JavaFX提供了各种路径元素，所有这些都可以作为javafx.scene.shape包中的类使用。LineTo-该类表示路径元素line。它可以帮助您从当前坐标到指定（新）坐标绘制一条直线。HlineTo-这是表
CSS过渡效果：如何实现元素的滑动效果
Nov 21, 2023 pm 01:16 PM
CSS过渡效果：如何实现元素的滑动效果引言：在网页设计中，元素的动态效果能够提升用户体验，其中滑动效果是一个常见而又受欢迎的过渡效果。通过CSS的过渡属性，我们可以轻松实现元素的滑动动画效果。本文将介绍如何使用CSS过渡属性来实现元素的滑动效果，并提供具体的代码示例，以帮助读者更好地理解和应用。一、CSS过渡属性transition的简介CSS过渡属性tra
C++程序：向数组中添加一个元素
Aug 25, 2023 pm 10:29 PM
数组是一种线性顺序数据结构，用于在连续的内存位置中保存同质数据。与其他数据结构一样，数组也必须具备以某种有效方式插入、删除、遍历和更新元素的功能。在C++中，我们的数组是静态的。C++中还提供了一些动态数组结构。对于静态数组，该数组内可能存储Z个元素。到目前为止，我们已经有n个元素了。在本文中，我们将了解如何在C++中在数组末尾插入元素（也称为追加元素）。通过示例理解概念‘this’关键字的使用方式如下GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin
清除浮动有什么方法
Feb 22, 2024 pm 04:00 PM
清除浮动有什么方法，需要具体代码示例在网页布局中，浮动是一种常用的布局方法，可以让元素脱离文档流，并相对其他元素进行定位。然而，使用浮动布局时常常会遇到一个问题，就是父元素无法正确地包裹浮动元素，导致页面产生布局错乱的情况。所以，我们需要采取措施来清除浮动，使得父元素能够正确地包裹浮动元素。清除浮动的方法有多种，下面将介绍常用的几种方法，并给出具体的代码示例
html5不支持哪些元素
Aug 11, 2023 pm 01:25 PM
html5不支持的元素有纯表现性元素、基于框架的元素、应用程序元素、可替换元素和旧的表单元素。详细介绍：1、纯表现性的元素，如font、center、s、u等，这些元素通常被用于控制文本样式和布局；2、基于框架的元素，如frame、frameset和noframes，这些元素在过去用于创建网页布局和分割窗口；3、应用程序相关的元素，如applet和isinde等等。
CSS变形：如何实现元素的旋转效果
Nov 21, 2023 pm 06:36 PM
CSS变形：如何实现元素的旋转效果，需要具体代码示例在网页设计中，动画效果是提高用户体验和吸引用户注意力的重要方式之一，而旋转动画是其中比较经典的一种。在CSS中，使用“transform”属性可以实现元素的各种变形效果，包括旋转。本文将详细介绍如何利用CSS的“transform”实现元素的旋转效果，并提供具体的代码示例。一、如何使用CSS的“transf
如何使用CSS实现元素的透明度渐变效果
Nov 21, 2023 pm 01:38 PM
如何使用CSS实现元素的透明度渐变效果在Web开发中，为网页元素添加过渡效果是提升用户体验的重要手段之一。透明度的渐变效果不仅可以使页面变得更加平滑，还可以突出元素的重点内容。本文将介绍如何使用CSS实现元素的透明度渐变效果，并提供具体的代码示例。使用CSS的transition属性要实现元素的透明度渐变效果，我们需要使用CSS的transition属性。t
