`
keimon
  • 浏览: 74821 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

IE兼容-模拟IE6、7的float:right属性

 
阅读更多

在网页中有很多左右结构的标题,在一行的左边是“标题”,右边则是“更多”,在IE6,7中,如果处理不当则会出现右边的文字“更多”出现在下一行。究其原因是float:right的问题。下面是几种解决方法,可根据情况来选择,当然也可以有其他更好的办法。
1:使一行中的元素全部浮动起来,如在这里,我们可以让第一个span元素增加float:left属性。
2:用绝对定位代替浮动,如在这里,让div元素获得position:relative属性。第二个span元素获得position:absolute属性,该元素的具体位置可以设置它的top、left等属性。

示例代码如下:

<style>
*{
margin:0;
padding:0;
}
div{
width:400px;
height:40px;
line-height:40px;
}
.right{
float:right;
}
</style>

<div>
  <span>标题</span>
  <span class="right">更多</span>
</div>

0
1
分享到:
评论

相关推荐

    DIV+CSS 兼容性 IE FF

    - **问题描述**:设置为`float`的div在IE下设置的`margin`会加倍,这是IE6中存在的一个bug。 - **解决方案**:可以在该div内部添加`display: inline;`。例如: ```html ... ``` 相应的CSS为: ```css ...

    最全的CSS浏览器兼容问题整理(IE6、IE7)

    在Web开发中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对老旧的Internet Explorer版本,如IE6和IE7。了解和掌握这些兼容性技巧,能有效提升网页在不同浏览器上的表现。 1. **垂直居中...

    css 跨浏览器实现float:center

    此方法在大多数现代浏览器中都能很好地工作,但对于老旧的浏览器,如IE6和IE7,可能需要额外的CSS hack来确保兼容性。例如,可以使用`display: inline-block`和`text-align: justify`来实现类似的效果,但这可能会...

    IE678个人总结的式样问题

    - 这样的设置可以让浏览器以最佳模式渲染页面,尤其是对于IE8,可以使其模拟IE7的渲染模式。 #### 2. **Hack 技术** - **条件注释**:例如`&lt;!--[if IE 7]&gt; &lt;css code&gt; &lt;![endif]--&gt;`。 - **属性选择器**:例如`*...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    在网页设计中,`DIV+CSS`是一种常见的布局方式,然而不同版本的Internet Explorer(IE6、IE7和IE8)对于CSS的支持存在诸多兼容性问题。这些问题往往导致页面在不同浏览器中显示不一致,增加了开发者的调试难度。下面...

    css兼容问题

    **问题描述**:设置了`float`属性的元素,在IE浏览器中其`margin`值会被加倍。 **解决方案**: 1. **display:inline 方法**:通过设置`display: inline`,可以修正IE下的`margin`加倍问题。 - **HTML**: ```html...

    DIV+CSS相对IE6、IE7和IE8的兼容问题[借鉴].pdf

    在Web开发中,尤其是涉及到前端布局时,`DIV+CSS`的兼容性问题常常困扰着开发者,特别是针对不同版本的Internet Explorer(IE6、IE7和IE8)。这些早期版本的IE浏览器存在许多解析CSS规则的不同方式,导致在实现预期...

    css浏览器兼容性前端人员的必备

    本文主要介绍了针对IE6/7/8以及Firefox浏览器的一些常见兼容性问题及其解决方案。 #### 二、DOCTYPE的重要性 **DOCTYPE**(Document Type Declaration)是文档类型声明,它告诉浏览器以何种方式解析页面。这对于CSS...

    css 跨浏览器实现float-center.docx

    在CSS布局中,浮动(float)属性主要用于创建多列布局,通常我们使用的浮动方式是`float:left`或`float:right`,但这两种方法并不能直接实现元素的居中对齐。标题提到的“css 跨浏览器实现 float:center”实际上是指...

    jquery 100%自适应左右切换焦点图,兼容IE 6789及其它主流浏览器

    - **polyfill**:对于不被旧版IE支持的API,可以引入polyfill库,如Modernizr,以模拟缺失的功能。 ### 5. 实现步骤 1. 引入jQuery库和自定义JavaScript文件。 2. 创建HTML结构,包括焦点图容器、图片列表、导航...

    css兼容性.docx

    7. **触发IE的Layout属性**: - 当需要让包含浮动元素的容器自适应高度时,可以在容器上添加`overflow:hidden;`或`zoom:1;`,这会触发IE的私有属性“Layout”,解决高度自适应问题。 综上所述,处理CSS兼容性问题...

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    在网页设计中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对Internet Explorer(IE)和Firefox这两个主流浏览器。本文将详细阐述一些针对IE和Firefox的CSS兼容性处理技巧。 首先,要...

    margin值在IE6变成双倍

    标题中的“margin值在IE6变成双倍”指的是在Internet Explorer 6(简称IE6)浏览器中,当设置元素的外边距(margin)时,可能会遇到一个知名的兼容性问题,即所谓的“双边距问题”(Double Margin Bug)。这个问题主要...

    IE7,6与Fireofx的兼容性处理方法

    在Web开发中,浏览器兼容性始终是一个重要的考虑因素,尤其是在IE7、IE6和Firefox之间。这些早期版本的浏览器对CSS的解析方式存在差异,导致开发者需要采取特殊的技术来确保页面在各种浏览器中的一致显示。以下是...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

    针对标题“如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器”以及描述“DOCTYPE 影响 CSS 处理”,我们将详细讨论CSS兼容性和DOCTYPE对CSS的影响,以及处理这些浏览器差异的策略。 1. **DOCTYPE与CSS...

    css浏览器兼容性总结.pdf

    - 当设置`float`的`div`在IE6中,设置的`margin`会被加倍。解决方法是在`div`内部添加`display:inline`。例如: ```css #imfloat{ float:left; margin:5px; /*IE理解为10px*/ display:inline; /*IE理解为5px*/...

    最全的CSS浏览器兼容问题.txt )

    描述:本文旨在探讨并解决在开发过程中遇到的CSS浏览器兼容性问题,尤其关注IE7、6以及Firefox等浏览器的特性与限制,结合Web2.0技术背景下的XHTML编写规范,以及文档类型声明(DOCTYPE)对CSS样式的影响。...

Global site tag (gtag.js) - Google Analytics