IE6产生双边距的条件及解决办法

最新推荐文章于 2021-04-21 19:09:03 发布
最新推荐文章于 2021-04-21 19:09:03 发布
阅读量878 收藏
点赞数
文章标签： IE6双边距bug ie6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daihaoxin/article/details/19834115
版权

　　1、IE6双边距触发条件：  1）块级标签浮动     2）有左右外边距(上下外边距不存在问题)  

　　　　　　　　　　　　　　3）当有多个同行的浮动元素，切方向相同，则只有浮动方向最边缘的元素会有产生双边距bug；


　　2、  请用IE6狠点这里查看具体现象    


解决办法：  1） 块级标签添加  display:inline；   2）通过IE6可以识别的兼容性代码，设置IE6下边距减半

照物华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发必知：浏览器兼容(一)——IE双边距
mmcrsx_blog的博客
07-03 894
一、  不同浏览器的标签默认的padding，margin不同解决：css里 *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外边距是0二、IE6 双边距 bug   块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大<!DOCTYP...
对于ie6双边距的解决思路
langrentao的博客
03-08 396
在ie6中，设置div为浮动，然后赋予它margin-left或right值，此时会产生margin两倍于设定的值只需将他设置成行内元素，display：inline就能解决该问题
IE6双边距问题
qq_36800701的博客
04-08 232
<div class="item"></div>.item{ width: 200px; height: 200px; background: red; margin-left: 100px; float: left; }在IE6下你会惊奇的发现，.item这个元素距离body居然有200px的距离；（只有margin-left才会有这样的问题）解决方案:.i
浏览器兼容性经典问题（一） IE6 下双边距问题
speed_feng的专栏
11-15 7925
问题描述：         一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。         代码如下：
ie6双边距
u014773932的博客
06-04 334
ie6双边距 在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的2 0像素，而是40像素，如下图： 其实这是IE6的一个BUG(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:         1）要为块状元素；         2）要左侧浮动；         3）要有左外边距(margin-left)；   解决这个BUG很容易，只需要在相
表单元素radio select对齐与IE6下双边距问题解决方案
09-25
描述中提到的解决方案是通过将`<label>`标签与`<input>`、`<select>`元素进行垂直对齐，同时处理IE6的双边距问题。首先，我们需要理解`vertical-align`这个CSS属性。`vertical-align`用于设置行内元素或表格单元格...
IE6常见bug附解决方法
01-19
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline 3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9...
IE6下兼容性常见的几个问题与解决方法
09-24
本文主要探讨在IE6环境下遇到的一些典型问题及相应的解决策略。 首先，常见问题一是关于父元素宽度被撑开。在IE6中，内容可能会超出父元素预设的宽度和高度。例如，一个设置为400px宽的.box容器内有两个浮动元素....
IE float 双边距
ading0210的博客
11-10 116
IE 浮动元素的双边距 转载于:https://www.cnblogs.com/871735097-/p/6051480.html
如何解决IE6双边距问题？
草巾冒小子的博客
07-02 1201
解决IE6中浮动元素的margin双倍边距问题 IE6中，第一个浮动到父元素边上的元素，如果含有该方向的margin值，那么margin会以双倍显示。即：浮动元素的左边距在IE6上为所设定的左边距的两倍。 这个问题只会发生在浮动行的第一个浮动元素上。准确的说：应该是每一行的第一个元素都会受此影响。 为了解决该问题，需要给浮动元素添加属性display: inline，即可解决。 除...
ie6双边距问题
淘淘小窝
04-25 662
当使用 margin-left: float:left; 2个左方向的操作时会产生双边距问题(距离左侧双倍距离) 解决： display:inline;
什么是IE的双边距bug和如何解决？
NeroSolomon的博客
06-19 691
display:inline和display:block区别一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：.floatbox { float: left; width: 150px; height: ...
CSS中IE6下双边距BUG解决方案
UniKylin
03-21 1808
其实这个问题在刚学习CSS的时候就知道怎样解决了，但是一直不知道为什么会出现这种现象，今天顺便记录一下。1.为什么会出现双边距BUG？ <style type="text/css"> body,div{padding: 0;margin: 0;} .box{border: 10px solid black;float: left;} .inner{width: 100px;h
双边距重叠问题
weixin_45346719的博客
04-21 388
双边距重叠问题 多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠 两个相邻的外边距都是正数时、折叠结果是它们两者之间的较大值 都是负数时、折叠结果是两者绝对值的较大值 一正一负时、折叠结果是两者的相加值 解决嵌套块元素塌陷问题（父级子级同时有外边距，系统用较大的） 可以给父元素定义边框 可以为父元素定义内边距 可以为父元素添加overflow:hidden; ...
前端面试题HTML+CSS基础篇——双边距重叠
xiaomao_wxj的博客
08-05 645
双边距重叠问题 1. 什么是双边距重叠 多个相邻的（兄弟或者父子关系）标准流中的块元素垂直方向的margin会重叠。 2. 折叠结果 两个相邻的外边距都是正数的时候，折叠结果就是它们两者之间较大的值 两个相邻的外边距都是负数的时候，折叠结果就是它们两者之间绝对值的较大值 两个相邻的外边距一正一负的时候，折叠结果就是它们两者相加的和 3. 如何解决双边距重叠 给其中的一个div添加一个父的div，并且为这个div设置边框或者实现overflow：hidden； 将块级div设置成行内div（display：
【Html】双边距问题
O(∩_∩)O
12-10 1625
IE6中双边距Bug： 　　发生场合：当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。 　　解决方法：是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。 　　原理分析：块级对象默认的display属性值是bl
前端面试核心篇 （附答案）
caoyan0829的博客
05-09 604
1.webpack和gulp区别（模块化与流的区别） 答： gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、cs...
解决IE CSS bug：9个常见问题与修复技巧
2. **双边距问题（Double Margin Bug）**：在某些情况下，IE6会为浮动元素计算两次外边距。可以通过清除浮动或使用`display: inline-block;`来解决。 3. **透明度不兼容**：IE6-8不支持CSS的`opacity`属性。可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值