IE6双倍margin间距解决方案
问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。
解决办法:
方法一、当将其display属性设置为inline时问题就都解决了。
说明:这是因为块级对象默认的 display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在 双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一 个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline; 才能达到预期效果。
当然最坏的情况下,我们就可以使用"margin:10px 0 0 10px;_margin:10px 0 0 5px",这种“标准属性;_IE6识别属性”HACK方式解决。
注意:这个现象仅当块级对象设置
了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。使用
display:inline方法仅限于使用float时使用,否则显示会出现问题。多个子块在父块中使用float时,同行显示的多个子块只需要第一个
使用display:inline
方法二、
可以使用以下办法来书写兼容浏览器的css代码:
第一种
- :.div{
- background:orange;/*ff*/
- *background:green!important;/*ie7*/
- *background:blue;/*ie6*/
- }
第二种
- :.div{
- margin:10px;/*ff*/
- *margin:15px;/*ie7*/
- _margin:15px;/*ie6*/
- }
第三种
- :#div{color:#333;}/*ff*/
- *html#div{color:#666;}/*IE6*/
- *+html#div{color:#999;}/*IE7*/
IE6双倍margin间距解决方案的更多相关文章
- IE6双倍margin间距解决方法
虽然现在很少有人在用ie6了,但作为前端人员,是不的不面对的问题. 在ie6中,使用float后的元素,在margin—left,这是你会发现距离和你想的不一样,其他的浏览器又是正常的,增大margi ...
- css ie6双倍margin现象
IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...
- IE6下margin时,float浮动产生双倍边距
今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法 对元素float-left,然后 ...
- IE6 双倍距BUG
IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;
- 【IE6双倍边距】-IE6双倍边距的bug
效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...
- 解决IE6双倍边距BUG
解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的C ...
- inline-block元素的4px空白间距解决方案
http://www.jb51.net/css/68785.html inline-block元素的4px空白间距解决方案
- inline元素和inline-block元素的4px空白间距解决方案
实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家
- IE6 margin 双倍边距解决方案
一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...
随机推荐
- 【狼】unity3d iTween插件的学习
之前在一个三消游戏项目中接触到iTween,最近又要用到,发现iTween真的是一个很好用,省事的插件,有很多函数里包括 Hashtable的他都用一个函数很简单的完成了, 举几个例子 void Lo ...
- bzoj 3156 防御准备(斜率DP)
3156: 防御准备 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 837 Solved: 395[Submit][Status][Discuss] ...
- vijosP1285 佳佳的魔法药水
vijosP1285 佳佳的魔法药水 链接:https://vijos.org/p/1285 [思路] 图论思想. 很巧妙. 如A+B=C,将AB之间连边,边权为C,用以找相连物品与合成物. 用Dij ...
- lightoj 1036 dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1036 #include <cstdio> #include <cst ...
- 365. Water and Jug Problem
莫名奇妙找了个奇怪的规律. 每次用大的减小的,然后差值和小的再减,减减减减减减到差值=0为止.(较小的数 和 差值 相等为止,这么说更确切) 然后看能不能整除就行了. 有些特殊情况. 看答案是用GCD ...
- 002-python书写规范--消去提示波浪线
强迫症患者面对PyCharm的波浪线是很难受的,针对如下代码去除PyCharm中的波浪线: # _*_coding:utf-8_*_ # /usr/bin/env python3 A_user = & ...
- C++ —— 时间与日期
导读 在平时编程中有时需要获取当前的时间或者日期,然而不同的平台不同的场景下,有时使用的API也不尽相同.一般来说,C/C++中关于时间的标准库函数在不同的平台的都可以使用,可一些与平台相关的函数就只 ...
- Away3D 的实体收集器流程2
带着上次的疑问我们继续探讨Away3D 的渲染流程. 在Away3D中所有的显示对象都是继承Object3D 的我们先看看显示对象和继承关系. Object3D |---ObjectContainer ...
- 【Jsoup爬取网页内容】
思路:根据给定URL分析其源码,得到所需的网页内容的位置,制定规则采集或下载之 采集的图片和文字示例: tags: tag:brazil tag:dog tag:pet tag:pointyfaced ...
- hibernate批量删除和更新数据
转载自:http://blog.csdn.net/yuhua3272004/article/details/2909538 Hibernate3.0 採用新的基于ANTLR的HQL/SQL查询翻译器, ...