IE6双倍边距bug

最新推荐文章于 2019-12-24 16:13:14 发布

原创最新推荐文章于 2019-12-24 16:13:14 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

前端笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了IE6浏览器中双倍边距bug的出现条件，并提供了解决方案。主要包括将块元素转化为内联元素以消除bug，避免元素浮动以保持文本流，以及正确使用外边距属性。通过遵循这些建议，开发者可以有效解决IE6中的布局问题。

IE6双倍边距bug出现条件：

1.首先是块元素，内联元素不会出现此bug------所以以毒攻毒，使用display;inline;来讲此元素变为内联元素消除此bug

2.有浮动，脱离文本流

3.有外边距

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芝芝小笼包

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何解决IE6双倍margin的Bug？

My_wife_QBL的博客

07-10

1159

在网页设计和开发的历史中，Internet Explorer 6（简称IE6）是一个不可忽视的存在。尽管IE6已经是一个过时的浏览器，但在某些情况下，我们仍然需要考虑如何解决它在CSS布局中的一些特定问题，尤其是著名的“双倍margin”Bug。本文将详细介绍IE6双倍margin Bug的原因、影响以及解决方法，并通过实例帮助读者更好地理解和应用。

IE6盒子模型没问题详测双倍边距

09-25

对于IE6的双倍边距bug，还有其他一些解决方案，例如使用`*margin` Hack，这是一种专为IE6设计的CSS技巧，将星号(*)放在属性前，可以使得该规则只对IE6生效。例如，`*margin: 0` 将只影响IE6，并且会覆盖正常的margin...

参与评论您还未登录，请先登录后发表或查看评论

IE6的双倍边距bug

weixin_34071713的博客

11-19

108

2019独角兽企业重金招聘Python工程师标准>>> ...

解决IE6双倍边距bug

coding

05-09

1660

IE6双倍边距这个问题其实早在学习CSS之初都已经知道如何解决，但当时只知道如何解决而并不知道引起这个BUG的原因是什么，再接下来工作过程中不断实践也终于明白是怎么回事了。但最近开发项目逐渐转移到以IE7为IE的基础参考标准后，逐渐有点淡忘IE6下的一些诡异BUG的解决方案了，就是知道如何解决也忘了部分理论知识了。 1、问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“m

ie6双倍边距

你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。

02-21

216

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline {float:left;margin-left:10px;width:300px;height:200px;border:1px solid red;display:inline}

IE 双边距Bug

老李技术专栏

11-04

4447

一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：以下为引用的内容：.floatbox { float: left; width: 150px; height: 15

解决IE6双倍边距bug问题

爱前端的程序媛的博客

12-24

604

出现双边距一般都是在排版中遇到的问题。 IE6 的双倍边距bug：在IE6中，当为一个向左浮动的元素添加左外边距，或者为一个向右浮动的元素添加右外边距时，这个外边距值将会是设置的值的两倍举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

IE6双倍边距BUG

aihuaizhi9100的博客

01-12

145

不太喜欢用margin ，一般都改用padding ， margin的兼容行没有pading好，但有时候却又不得不使用例如：IE6中用了float:left之后导致margin-left双倍边距。解决办法加 display:inline 转载于:https://www.cnblogs.com/czj33499173/archive/2012/01/12/2320710.html...

解决IE6双倍边距BUG

weixin_33699914的博客

06-30

解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1）要为块状元素;2）要左侧浮动;3）要有左外边距(margin-left); 解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，代码如下： #redBlock{width:200px;height:200px;background:#900;margin-top:20p...

IE6双倍边距 IE6浏览器会出现双倍边距解决方法

09-25

在网页设计领域，IE6（Internet Explorer 6）双倍边距问题是一个历史悠久且让开发者头疼的兼容性问题。这个现象特指在IE6浏览器中，如果一个元素同时设置了浮动(float)属性和外边距(margin)，那么在实际渲染时，这个...

IE6的双倍边距和火狐自适应高度

08-22

这种现象被称为“IE6双倍边距BUG”。 **示例代码：** ```css body { margin: 0; } div { float: left; margin-left: 10px; width: 300px; height: 300px; border: 1px solid red; } ``` #### 解决方案解决...

IE6盒子模型与双倍边距问题深度解析

此外，文中提到的“双倍边距”bug是IE6另一个著名的兼容性问题。该问题出现在浮动元素（float:left 或 float:right）上，当相邻的浮动元素设置了margin时，IE6会错误地将外边距加倍。例如，两个并排左浮动的div，每...

overflow、overflow-x、overflow-y初识

sh0109的博客

05-10

2109

一、overflow overflow 属性规定当前内容溢出元素框时会如何处理。支持情况：所有浏览器都支持overflow属性。序号 overflow的值描述 1 visible 默认值，内容不会被修剪，会呈现在元素框之外。没有滚动条。 2 hidden 内容会被修剪，并且溢出内容是不可见的。不会出现滚动条。 3 scroll

万能兼容所有浏览器导航条-学习笔记

sh0109的博客

05-14

1352

兼容所有浏览器的万能浏览器，很多漂亮的导航基本都是由此导航条演化而来，多多练习几遍。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nav</title> <style> body,div,ul,li{margin: 0;padding:0;} ul{

CSS2.0下1行2列，左侧固定右侧自适应布局，兼容所有浏览器。[学习笔记]

sh0109的博客

05-15

576

``` 1行2列-左固右自适应 body,div{margin:0;padding:0;} #content{overflow:hidden;float:left;background:#ccc;} #box{width:100%;height:600px;background:#ffc;float:left;} #right{height

前端编程-如何纠错-学习笔记

sh0109的博客

05-15

544

如何纠错设置背景法找出相应盒子的区域，通过区域来判断问题的起因，比如“父级元素的高度自适应问题” 逐步删除法在“设置背景”仍无法解决找出问题原因的情况下，可将页面“另存为”一份，现在结构代码（xhtml）中逐步删除无关代码，直到在结构中只剩下相应的版块，此时可以判断起因不是结构的不合理，然后再主次删除与版块无

XHTML+CSS 文字加粗的方式[学习笔记]

sh0109的博客

05-15

438

font-weight:700；相当于font-weight:bold;数字比英文解析更快，建议写700；strong标签加粗h1~h6标题标签加粗

使用CSS Hack解决IE6双倍边距Bug

sh0109的博客

05-14

386

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传 LaTex数学公式 UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl