前端开发必知：浏览器兼容(一)——IE双边距

最新推荐文章于 2023-01-16 14:36:31 发布
最新推荐文章于 2023-01-16 14:36:31 发布
阅读量894 收藏 2
点赞数
分类专栏： 前端学习者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmcrsx_blog/article/details/79867600
版权
本文探讨了前端开发中浏览器兼容性问题，重点是IE6的双边距bug。当块状元素左侧浮动并设置左外边距时，IE6会显示两倍边距。解决方案包括统一浏览器标签的默认padding和margin，以及为浮动元素添加display：inline。
摘要由CSDN通过智能技术生成

一、  不同浏览器的标签默认的padding，margin不同

  • 解决：css里 *{margin:0;padding:0;}
  • 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外边距是0

二、IE6 双边距 bug

   块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大 

<!DOCTYPE html>
<html lang="en">
<head
最低0.47元/天 解锁文章
mmcrsx_blog
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE float 双边距
ading0210的博客
11-10 116
IE 浮动元素的双边距 转载于:https://www.cnblogs.com/871735097-/p/6051480.html
浏览器兼容性经典问题（一） IE6 下双边距问题
speed_feng的专栏
11-15 7925
问题描述：         一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。         代码如下：
IE6 双倍水平外边距BUG以解决方案
何东狮吼
07-27 2126
解决办法：设置display:inline解决。原因分析：块框对象默认的display属性值是block，当设置了浮动同时设置了外边距就会出现这情况。并且，因为浮动都有其相对应的对象，只有相对于其父对象的浮动才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对
ie6双边距问题
淘淘小窝
04-25 662
当使用 margin-left: float:left; 2个左方向的操作时会产生双边距问题(距离左侧双倍距离) 解决： display:inline;
IE6双边距BUG演示及解决方法
ZH2357710792的博客
04-07 190
IE6双边距bug演示 　　当为一个块级元素同时设置float和margin属性时，在IE6下元素的margin显示效果为原来的2倍。 　　简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D...
浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1
09-25
在前端开发中，浏览器兼容性问题常常困扰着开发者，尤其是对于Internet Explorer（IE）这个曾经占据主导地位的浏览器。在本文中，我们将深入探讨IE浏览器的一些常见Bug以及对应的解决策略，帮助前端工程师更好地应对...
表单元素radio select对齐与IE6下双边距问题解决方案
09-25
标题所提及的问题是关于"表单元素radio select对齐与IE6下双边距问题"，这在前端开发中是一个常见的痛点。 在标准的HTML表单中，`<input type="radio">` 和 `<select>` 元素通常是默认左对齐的，但有时我们希望它们...
46种常见的浏览器兼容性问题大汇总
05-15
3. **event对象坐标**：IE提供`event.x`和`event.y`，Firefox则有`event.pageX`和`event.pageY`。可使用如下代码进行兼容处理： ```javascript var mX = event.x ? event.x : event.pageX; var mY = event.y ? ...
CSS 多浏览器兼容性问题及解决方案
09-25
因此，掌握CSS多浏览器兼容性的基础知识对于前端开发者而言至关重要。 #### 二、CSS多浏览器兼容性常见问题 ##### 1. DOCTYPE影响CSS处理 - **问题描述**：文档类型声明（DOCTYPE）的不同会影响CSS样式的解析方式...
CSS多浏览器兼容总结(个人经验)
12-04
在CSS布局设计中，浏览器兼容性一直是一个棘手的问题，尤其是在处理不同的浏览器，如Firefox、Internet Explorer (IE)等时。以下是对标题和描述中提到的一些关键知识点的详细解释： 1. **DOCTYPE影响CSS处理**：...
一个关于ie的bug——双边距bug。
小猪的学习笔记
04-03 396
今天用CSS写样式的时候，发生一件非常不和谐的事。自己写的CSS样式在ie7和FF中都没有问题，但是客户说在ie6中的布局是乱的，后来看一下，用CSS hack给解决了。但实在想不通为什么会出这样的问题，于是google了一下，终于发现问题之所在。双边距BugDouble-Margin BugInternet Explorer 6和其更早的版本有时会把已经应用到浮动元素上的一个边距尺寸
IEBug之双边距bug
weixin_33802505的博客
04-28 51
一、什么是双边距Bug？ 先来看图： 我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。 这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性： .floatbox{ float:left; width:150px; height:...
IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大。
最新发布
W1254667的博客
01-16 97
解决：加入_display：inline。
IE的双边距Bug以及解决办法
weixin_30757793的博客
08-11 106
display:inline和display:block区别 一、什么是双边距Bug？ 先来看图： 我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性： .floatbox { float: left; width: 1...
web前端－CSS Margin(外边距)－013
helloMr_wo的博客
10-09 3108
CSS Margin(外边距)属性定义元素周围的空间。Marginmargin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。 可能的值： 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素，pt，em等）
什么是IE的双边距bug和如何解决？
NeroSolomon的博客
06-19 691
display:inline和display:block区别一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：.floatbox { float: left; width: 150px; height: ...
IE6的双边距Bug以及解决办法
happyqyt的专栏
03-18 380
bug描述：就是你明明设置margin-left为10px，但是在IE6下显示的左边距却是20px。 bug出现的条件：当浮动元素的浮动方向和外边距的设置方向一致且浮动元素靠近浮动边界时才会出现。比如元素向左浮动时设置左边距，并且为一行中的第一个浮动元素时会出现这个bug，同样，向右浮动时设置右边距，且为一行中的最后一个浮动元素时也会出现这个bug。 bug的解决办法：给浮动元素块加上disp...
IE6产生双边距的条件及解决办法
daihaoxin的专栏
02-24 878
1、IE6双边距触发条件：  1）块级元素浮动     2）有左右外边距(上下外边距不存在问题)   　　　　　　　　　　　　　　3）当有多个同行的浮动元素，切方向相同，则只有浮动方向最边缘的元素会有产生双边距bug； 　　2、  请用IE6狠点这里查看具体现象     解决办法：  1） 块级元素添加  display:inline；   2）通过IE6可以识别的兼容性代码
那些与 IE 相伴的日子
前端劝退师
03-24 120
????这是第91篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～前言Internet Explorer（简称：IE）是 微软公司 (https://b...
Web前端面试必备：HTML、CSS与浏览器兼容性解析
针对IE6的常见问题，比如双边距BUG，可以通过设置`display`属性来解决；3像素问题通常涉及浮动元素，可使用`display:inline-block`或调整`margin`；超链接的`hover`状态失效，需确保正确的CSS声明顺序，即`link ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值