margin-left在IE6下左浮动加倍-20140102 - - ITeye博客

`

xjwolaile

浏览: 330737 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

幻紫1992：还有分页的功能、、(⊙o⊙)嗯
[JS代码库]
幻紫1992：就是没有返回顶部的按钮，这个页面、、
[JS代码库]
幻紫1992：很受用，O(∩_∩)O谢谢啦~
[JS代码库]
nlnl520coco：想下个东西规则太苛刻了网站得改进
[JS代码库]
hxp520520： new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029

margin-left在IE6下左浮动加倍-20140102

博客分类：

学习
前端技术

阅读更多

一、IE6下如果line-height超出本身区块的height高度，则会把区块高度挤高。比如：li{line-height:25px;height:20px;}则实际li的高度为25px，而IE7和FF下则为20px.

二、 IE下的margin double bug，具体说来比如一个div你设置左浮动，然后又设置margin-left：5px，则实际margin-left会加倍变为10px。解决办法：加display：inline

所以说一般在距左浮动下要兼容ie6的情况下都最好加上display：inline 属性

display 属性规定元素应该生成的框的类型

inline 默认此元素会被显示为内联元素，元素前后没有换行符

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>
</body>
</html>

最有效的说明就是这个P标签本身带有换行的能力但是加上display: inline 就会链接到一起了

分享到：

ie下的指定样式-20140106 | 浮动存在的问题-20131229

2014-01-02 23:04
浏览 712
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

css margin-left在IE6下的问题的解决方法: 比如原来是margin-left:20px，经过ie6的解释会变成40px 解决办法是在原来的margin-left后再加上一个_margin-left:10px，变成margin-left:20px;_margin-left:10px 后者的样式将只适用于ie6 问题解决

margin-left和right失效(斯芬克斯)之谜: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing...

基于GrOsup style= margin-left-10px;¨supbner基方法的乘法器等价性验证.pdf: 基于GrOsup style= margin-left-10px;¨supbner基方法的乘法器等价性验证.pdf

css中子元素设置margin-top为什么影响了父元素: 本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

IE6 float:left margin-left出现两倍像素: 在IE6下（标准模式/怪异模式）一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px。例：复制代码代码如下: <!DOCTYPE HTML> <html> <head> <...

margin-top在火狐和IE的区别: 定位层被遮的问题，特别是在火狐和IE的区别

Firefox下margin-top会出错: Firefox下margin-top 会将上级DIV也往下移.

DIV CSS常用的网页布局代码: } #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列以下是引用片段：body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400...

类似QQ的全套聊天系统: MARGIN-LEFT: 0px; MARGIN-TOP: 0px } P { FONT-FAMILY: "Verdana", sans-serif; FONT-SIZE: 70%; LINE-HEIGHT: 12pt; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 10px; MARGIN-TOP: 10px } .note { BACKGROUND-...

C++编写小游戏: MARGIN-LEFT: 0px; MARGIN-TOP: 0px } P { FONT-FAMILY: "Verdana", sans-serif; FONT-SIZE: 70%; LINE-HEIGHT: 12pt; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 10px; MARGIN-TOP: 10px } .note { BACKGROUND-...

精美浮动代码及图片: <div style="margin-left: -5px;" class="fxbox"> <li style="display: list-item;"> <div style="margin-left: -5px;" class="tgbox"> <li style="display: list-item;"> <div style="...

Css padding和margin区别: margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px; border-color:#F0F; } <tr><td>test数据</td></tr> <tr><td>test数据</td></tr> <tr><td>test...

一个关于css中margin-right没有效果的问题: 今天在群里面，有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下：复制代码代码如下: .style1{ width:400px; height:440px; background-color:red; border:5px solid silver; margin-...

CSS样式文件格式化工具: margin-left:0px; margin-top:0px; margin-bottom:0px; display:inline-block; text-align:left; } 格式化为： .UserLogin_7{width:213px;height:45px;clear:both;margin-left:0px;margin-top:0px;margin-...

jquery超炫照片墙: margin-left: 5px;"> <div style="background-position: -125px 0px; left: 327.786px; top: 60.9px; transform: rotate(18deg); background-image: none;" data-transform="rotate(18deg)">; height: 115px; ...

博客网页制作: margin-left:15px;margin-top:20px;font-size=15px;} img{border:2px; solid gray;margin:2px;} p{line-height:22px;} ;height:100px;background-color:brown;margin-top:20px;margin-left:10px;margin-right:10...

js分页效果2兼容FOX: /* Paginator */ .paginator { font: 14.8px normal Arial, Helvetica, sans-serif; color: #666666;... margin-left: 20px; } .paginator .count { margin-left: 20px; font-size: 11px; } </style>

Global site tag (gtag.js) - Google Analytics