双倍浮动的解决方法

最新推荐文章于 2021-06-03 15:35:19 发布

转载最新推荐文章于 2021-06-03 15:35:19 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2602921/blog/596427

本文探讨了IE6及其以下版本浏览器中出现的双倍浮动问题，该问题是由于这些浏览器不能正确解析浮动属性导致的。文章提供了一个解决方案：通过给浮动元素添加display:inline声明来修正双倍边距的问题。

IE6永远都是程序猿心中的痛，不过好消息来了，微软明年将暂停对IE6的维护与升级，这就是福音啊，但是今天给大家写下IE6的双倍浮动的问题，IE6或者更低级别的版本不能很好的解析浮动时，会错误的将浮动解析成双倍的边距。

hack1:给浮动的元素添加声明：display:inline

转载于:https://my.oschina.net/u/2602921/blog/596427

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

choubopian2018

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

IE Bug--浮动对象外补丁的双倍距离的解决方法

10-31

### IE Bug--浮动对象外补丁的双倍距离的解决方法 #### 背景介绍在Web开发过程中，浏览器兼容性问题一直是开发者们头疼的问题之一。其中，Internet Explorer（IE）作为一款曾经广泛使用的浏览器，其自身的诸多Bug...

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

12-13

这个问题可以通过多种方法来解决，其中一种是使用条件注释或者CSS Hack，针对IE6应用特定的样式。然而，这里介绍一个更优雅且无侵入性的解决方案：为浮动元素添加`display:inline`属性。这是因为当元素的`display`...

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

IE6双倍浮动间距的问题解决

创世宇图宏图天下

07-08

1794

IE6双倍浮动间距的问题解决：当我们对一个同时设置了float:left;和margin-left:10px;样式的时候，可怕的事情发生了.这个DIV竟然与左边间距是：20px.出现了双倍浮动间距的问题*1).第一种方法：在这个DIV中再增加一个属性：display:inlin

[css] 如何解决IE6浮动时产生双倍边距的BUG？

歌谣的博客

01-31

533

[css] 如何解决IE6浮动时产生双倍边距的BUG？ 1.当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距 2.给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item 这样在元素浮动的时候就不会在ie6下面产生双倍边距的问题了个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

IE双倍浮动边界问题

fzcbce的博客

09-27

283

IE双倍浮动边界Bug 原址：[url]http://www.positioniseverything.net/explorer/doubled-margin.html[/url] 译文：PorkFat 什么发生故障？一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边...

清除浮动造成的影响的解决方案总结

weixin_33691700的博客

10-09

149

1、将设置float的元素的父元素也设置float。　　缺点：很有可能不符合情况要求 2、设置父元素的position为absolute，前提是父元素的父元素并没有设置position：relative。　　缺点：很有可能不符合情况要求 3、设置父元素的overflow为hidden。　　尚不知晓，猜测是只能清除浮动带来的父元素塌陷，但无法闭合浮动（待验证） 4、设置父元素的di...

关于ie6下的双倍浮动

weixin_30904593的博客

06-14

147

上例子： <div clss="test1" style="float:left;margin-left:50px; width:50px;height50px;background:red;"></div> <div clss="test2" style="float:left;margin-left:50px; width:50px;h...

IE6下出现双倍margin的解决方法

10-30

### IE6下出现双倍margin的解决方法 #### 背景与问题描述在进行网页设计时，尤其是在处理老旧浏览器兼容性问题时，经常会遇到一些棘手的技术挑战。其中，“IE6双倍margin”问题就是一个典型的例子。该问题不仅困扰...

IE6的双倍,3px,注释引起的文字错位等几个BUG解决方法

09-25

以下将详细介绍IE6中常见的几个BUG及其解决方法，包括DIV中背景图片下方出现的3px空白间隔问题、双倍浮动BUG、注释引起的文字错位BUG以及著名的3px间隙BUG。 1. DIV中背景图片下方的3px空白间隔问题在IE6中，当...

IE6浮动元素的双倍边距问题

fuyun2000的专栏

08-01

1196

IE6中对浮动元素的左右外边距将产生双倍边距的问题，即如果左浮动则左外边距会产生双倍外边距，右浮动右外边距会产生双倍外边距，解决办法是将其display样式设置为：inline。另外浮动元素在与其相邻的非浮动元素之间将默认产生3像素的外边距，因此如果此时再增加外边距则两元素之间的距离将变得更大。

双倍浮向（双倍边距）（只有IE6出现）

weixin_30740581的博客

08-17

190

声明： web前端学习笔记，欢迎大神指点。联系QQ：1522025433. 描述：在IE6中，一个居左（或居右）浮动的元素放置进一个容器盒(box)，并在浮动元素上使用了左边距(或右边距) 在ie6内便产生双倍边距。hack:给浮动元素添加声明：display:inline; 案例代码： 1 1 <title>IE6双倍边距</title>...

修复IE的浮动元素双倍边距Bug

歪脖先生的博客

02-25

658

修复IE的常见BUGCSS开发人员可能经常会碰到的一个现象是，一个页面在IE（特别是老版本的IE）中显示正常，而在现代浏览器中却完全变形了，或者情况完全相反。常常能听到有人抱怨：“在IE上开发时间中，超过 60% 的时间，都是在与IE的Bug作斗争。”导致这一现象的根本原因，是不知道IE都有哪些 bug，也不知道如何解决这些 bug。在出现问题时，往往束手无措，更不要说预防 Bug 了。因此，作为...

浮动边距加倍解决办法

知周博远

05-23

312

使用Dreamweaver的【检查页面】功能会提示浮动边距加倍：如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。影响: Internet Explorer 6.0 目前所知该错误只影响ie6而不影响其他浏览器。...

解决浮动后IE6会产生双倍的距离

coding

09-12

783

#box{ float:left; margin:0 0 0 100px; } 这种情况下IE6会产生200px的距离。解决办法： 1、加上display:inline，使浮动忽略解释一下block,inline两个元素。 block:总是在新

IE6-浮动margin产生双倍距离的问题

草泥马

07-12

2050

*{padding:0;margin:0;} .wrapper{width:500px;margin:0 auto;background:red;} .left{float:left;display:inline;width:200px;height:250px;margin-left:50px;background-color:green;} .right{float:left;displ

浮动错位和双倍边距的兼容性问题

weixin_34185364的博客

03-21

114

一：浮动错位 <div class="div1"></div> <div class="div2"></div> 要想让div1和div2处于同一行，且div1在坐边，仅设置float：left；在FireFox中并不能得到想要的效果（IE中可以），处理这个问题，请在div2中也添加一个float：left; 二：IE6的双倍边距触...

【IE6.0 Bug总结之二】双倍边距(margin)的bug

weixin_34228387的博客

11-09

132

【IE6.0 Bug总结之二】双倍边距(margin)的bug IE6 的bug算是让人头疼甚至蛋疼到了极点，有时候他的种种bug会带给你无限的惊奇，有时候一个在其他浏览器上非常完美的网页到IE6上就乱成一团。今天就遇到了这个问题，在firefox上调试页面时页面都没问题，但一到IE6上，吓了一跳，布局完全乱掉。后来发现是IE6下浮动层双倍边距的bug引起的，于是就把问题整理了一下，分...

关于浮动的前世今生

信青哥,得永生

08-18

386

html中css样式表说法正确,HTML+CSS试题有答案.doc

weixin_28940217的博客

06-03

1815

HTMLCSS试题有答案一、单项选择题 (每套20题，每题2分，共40分)1、关于web标准以下说法错误的是( b )A、Web标准是一个复杂的概念集合，它由一系列标准组成B、这些标准全部都由W3C起草与发布C、Web标准可以分为3个方面D、Web标准里的表现标准语言主要包括CSS2、以下是元素作用的是(a )A、该元素用来定义文档类型B、该元素用来声明命名空间C、该元素用来向搜索引擎声明网站关键...

解决浮动IE下的双倍间距问题与兼容技巧

解决这个问题的一种方法是通过添加`display:inline`，这会让浮动元素变为内联元素，使其行为更接近标准浏览器的预期，从而避免双倍间距。同时，也可以利用`vertical-align:middle`和`line-height`来实现元素的垂直...