`
keimon
  • 浏览: 72853 次
  • 性别: 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
分享到:
评论

相关推荐

    右下角弹出窗口 javascript

    float:right;font-size:12px;cursor:pointer} &lt;/style&gt; &lt;body&gt;&lt;div id="rbbox"&gt;()"&gt;关闭&lt;/a&gt;&lt;iframe src="1.jpg" height="200" width="300" scrolling="no" &gt;&lt;/iframe&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ...

    div-css-漂亮的导航条

    #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; ...

    media-queries

    .header-right{ float:right; padding:16px 5% 10px 0; position:relative;} .nav-btn{ display:block; background:#1271A0; width:40px; height:40px; line-height:40px; position:absolute; right:10px; bottom:6...

    多选下拉列表demo

    .ui-multiselect-filter { float:left; margin-right:10px; font-size:11px } .ui-multiselect-filter input { width:100px; font-size:10px; margin-left:5px; height:15px; padding:2px; border:1px solid #292929...

    网页制作代码+课程总结

    margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ padding-top:15px; height:90px; } #logo{ margin:0px; padding:0px; float:left; width:365px; text-align:right; } .pic{ ...

    CSS中右对齐float:right换行的解决办法

    是不是很多朋友在应用FLOAT左右的时候也出现这个问题,下面给出几种常用的解决方法,希望对出现这样问题的朋友有所帮助哈。 第一种解决办法:把左右对换,比如吧日期放在标题的前面,我朋友就是那个问题,对调以下...

    E7 float:right 时元素换行出现在下一行的bug解决方法

    如果前面几个元素没有设置浮动,而给最后的元素设置为float:right,则被设置为浮动的这个元素会出现在下一行,针对这个问题,下文给出详细的解决方法,感兴趣的朋友不要错过

    TMS Component Pack v3.7

    caption visibility with stylerUpdate : TAdvSpinEdit v1.4.0.1 ----------- Improved: float formatting OnExit for keyboard entry**********TMS Component pack v3.7 : update Dec 12, 2005**********Update : ...

    IE8下CSS3选择器nth-child() 不兼容问题的解决方法

    一、代码 &lt;style&gt;...float:left;} div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} &lt;/style&gt; &lt;li&gt;11 &lt;li&gt;22 &lt;li&gt;33 二、预览效果 如上图

    静态网业模板1

    float:right; text-decoration:none; font-size:11px; padding:0px 15px 0 0 ; } .about{ width:337px; clear:both; background:url(images/border.gif) no-repeat bottom center; padding:0 0 20px 0; } img.right{...

    webparsy:Node.JS库和cli,用于使用Puppeteer(或不使用)和YAML定义来抓取网站

    A4 - many : as : github_tools event : githubTool selector : main .col-lg-9.mt-1.mb-4.float-lg-right a.col-md-6.mb-4.d-flex.no-underline element : - property : selector : a type : string

    小清新网店模板

    .user-address li.user-addresslist {float: none;min-height:80px ;position: relative;border-bottom:1px solid #eee ;padding:15px 10px;} .new-tit {padding-bottom:7px ;font-size: 14px; position:relative;} ...

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    次的情况与上次不同,上次直接将浮动的元素移到不浮动的元素之前就可以解决问题,而这次的float:right 时元素换行错位的情况,在下文也给出了不错的解决方法

    跨浏览器实现float:center

    原文:http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。...

    MySQL基础知识.md

    |FLOAT|4|单精度浮点数|| |DOUBLE|8|双精度浮点数|| |ENUM||单选,比如性别|ENUM('男','女')| |SET||多选|SET('A','B','C')| |DATE|3|日期|YYYY-MM-DD| |TIME|3|时间点或持续时间|HH:MM:SS| |YEAR|1|年份值|...

    HTML 网页设计

    .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:...

    css 跨浏览器实现float:center

    我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。

    三星9305收索

    margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{font-size:12px;line-height:100%;font-style:normal;font-weight:normal;color:#fff;...

Global site tag (gtag.js) - Google Analytics