`
yantaoliu2006
  • 浏览: 91911 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ie6 双边距

 
阅读更多
在ie6中使用float属性的注意事项！  它的源代码和实验结果如下！
 <style type="text/css">  div#demo1,div#demo2{ height:150px; width:150px; border:1px solid #0000FF; background:#99CC00;}  #parent{ height:200px; width:600px; border:1px solid #FF0000; margin:0 auto;} #demo1{ margin-left:50px; float:left;} #demo2{ margin-right:50px; float:right;} </style> </head> <body>  <div id="parent">  <div id="demo1"></div> <div id="demo2"></div> </div> 
</body
>    而在ie6以上的版本中和firefox中的实验结果如下！



  
我们可以很明显的看到，在ie6以及firefox浏览器中，离红色边框的距离要小的多！而ie6距离边框的距离是ie6以上版本的二倍，这是ie6中特有的现象——双倍边距。     如果我们想解决这个问题我认为有两种方法！   1#demo1,#demo2{ display:inline}    2专门针对ie写语句 <!--[if IE 6]>  <style typte="text/css"> #demo1{ margin-left:25px;} #deom2{marign-right:25px; </style> <![endif]--> 就搞定了！    至于3像素问题：  就是说在ie6中环绕在元素周围的内容会自动的增加3像素的距离！ 解决方案：  针对这个问题，我们也可以专门针对ie6写样式！此方法与上面类似。就省略不写了！
  • 大小: 5.2 KB
  • 大小: 5.1 KB
分享到：
| IE6 3像素bug的缘起与解决方案
评论
1 楼 yantaoliu2006 2013-07-11  
还有一种解决办法 将有float属性的元素添加display:inline属性。
发表评论

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

相关推荐

    DIV+CSS浏览器兼容方法的总结

    - 当一个元素设置了`float`属性并且具有`margin`时，在IE6中可能会出现双边距bug。 - 解决方案是将`float`元素的`display`属性设为`inline`。 - 示例代码： ```css div { float: left; margin-left: 10px; ...

    浏览器兼容代码大全

    IE6存在一个双边距Bug，在某些情况下，浮动元素的左边距会比预期的大一倍。通过将浮动元素的`display`属性设置为`inline`，可以有效地避免这个问题。 ##### IE6 图像透明背景问题 1. 使用GIF格式的图像替代PNG格式...

    表单元素radio select对齐与IE6下双边距问题解决方案

    标题所提及的问题是关于"表单元素radio select对齐与IE6下双边距问题"，这在前端开发中是一个常见的痛点。 在标准的HTML表单中，`&lt;input type="radio"&gt;` 和 `&lt;select&gt;` 元素通常是默认左对齐的，但有时我们希望它们...

    美工笔试题目

    IE6存在双边距bug，即块级元素在浮动后会显示额外的空白。解决方案通常涉及使用负margin或使用clearfix技术。 ### 12. 1px容器的定义 创建高度仅为1像素的容器可以通过绝对定位和设置高度为0、上边距为1像素的方式...

    前端开发面试题.pdf

    - IE6双边距bug：可以使用`_display:inline;`修复。 - 渐进增强和回退策略：使用条件注释或CSS hack处理不同IE版本的差异。 - 自定义属性和事件对象属性：统一使用`getAttribute()`获取自定义属性，并处理`event`...

    2015前端面试题（含答案）1

    - **IE6双边距bug**：浮动元素的宽度计算问题，可使用负margin或`display:inline-block`解决。 此外，前端开发者还需了解： - **Web标准**：理解W3C标准，关注语义化HTML和CSS规范。 - **浏览器内核差异**：处理...

    前端开发面试题整合（css、js、vue。react等）

    * IE6 双边距 bug：块属性标签添加了浮动 float 之后，若在浮动方向上也有 margin 值，则 margin 值会加倍。 * 上下 margin 重合问题，相邻的两个 div margin-left margin-right 不会重合，但相邻的 margin-top ...

    前端工程师面试题

    - IE6双边距Bug，即浮动物体的横边距加倍问题，可通过设置`_display:inline`解决。 - 获取自定义属性时，统一使用`getAttribute()`方法以确保兼容性。 - 鼠标事件的位置属性在不同浏览器中的命名差异，需分别处理...

    网页排版IE6兼容性问题修改方法

    当元素设置为`display:inline-block`时，IE6会出现双边距bug，可以通过设置`display:block`或`zoom:1;`（触发hasLayout）来消除。 5. **hasLayout机制** IE6特有的hasLayout机制，当元素满足某些条件时，会自动...

    前端面试题汇总

    - **兼容性问题**: 如IE6双边距BUG。 - **解决方法**: 使用条件注释或特定浏览器的CSS Hack。 **44. display属性** - **值**: `block`, `inline`, `inline-block`, `flex`, `grid`等。 - **作用**: 控制元素的显示...

    屏蔽ie6 ie7浏览器

    在CSS方面，由于IE6和IE7对CSS2.1标准的支持有限，开发者可能需要使用特定的IE Hack来修复样式问题，如*前缀、下划线 hack 和双边距问题等。同时，使用CSS重置或 Normalize.css 可以帮助消除不同浏览器之间的默认...

    margin值在IE6变成双倍

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

    iebug总结jar包

    5. **双边距问题**：在IE6中，浮动元素的内联元素会额外增加一个像素的边距，可通过负margin或者`display:inline-block`来修复。 6. **CSS选择器限制**：IE6不支持一些高级CSS选择器，如`:hover`在非链接元素上、`:...

    ie6十大兼容性问题

    IE6中的一个常见问题是浮动元素的边距加倍问题，即所谓的 “双边距 bug”。为了解决这个问题，可以将浮动元素的 `display` 属性设置为 `inline`。 **示例：** ```css #floatElement { float: left; display: ...

    div css图文混排列表设计中的基础问题总结

    `就是一种解决IE6双边距问题的方法。 6. **链接样式**： 链接的样式可以使用伪类如`:hover`来改变，如`.gfixlist li .txt .title:hover`和`.gfixlist li .txt .more:hover`，这使得鼠标悬停时链接的视觉反馈更加...

    IE6下兼容性常见的几个问题与解决方法

    第七个问题，IE6的双边距bug，横向margin值会被放大两倍。使用display:inline可以修复这个问题，使元素不被视为块级元素，从而避免边距加倍。 最后，问题八涉及到IE6下的外边距消失。当父元素宽度和内容宽度差异...

    IE6常见bug附解决方法

    doctype html&gt; 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline 3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9...

Magicbox
Global site tag (gtag.js) - Google Analytics