IE6的双倍边距bug

最新推荐文章于 2024-09-27 09:37:38 发布
最新推荐文章于 2024-09-27 09:37:38 发布
阅读量286 收藏
点赞数
分类专栏： html 文章标签： ie 2010 border xhtml float html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyler88/article/details/7313161
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body, div, ul ,li, a, img {margin:0; padding:0; border:0; font-size:12px; line-height:1.5em}
#layout{
width:390px;
margin:50px 40px;
border:1px solid #ccc;
overflow:hidden;
height:1%;
}
#layout ul{
list-style:none;
}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a img { border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { border:2px solid #f98510;}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
tyler88
关注
专栏目录
解决IE6双倍边距bug
coding
05-09 1591
IE6双倍边距这个问题其实早在学习CSS之初都已经知道如何解决，但当时只知道如何解决而并不知道引起这个BUG的原因是什么，再接下来工作过程中不断实践也终于明白是怎么回事了。但最近开发项目逐渐转移到以IE7为IE的基础参考标准后，逐渐有点淡忘IE6下的一些诡异BUG的解决方案了，就是知道如何解决也忘了部分理论知识了。 1、问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“m
IE6下margin双倍边距Bug的处理办法
Preserve
03-19 688
一、什么是双边距Bug？ 先来看图： 我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且 要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：   以下为引用的内容： .floatbox {  float: left;  width:
解决IE6双倍边距bug问题
爱前端的程序媛的博客
12-24 518
出现双边距一般都是在排版中遇到的问题。 IE6 的双倍边距bug： 在IE6中，当为一个向左浮动的元素添加左外边距，或者为一个向右浮动的元素添加右外边距时， 这个外边距值将会是设置的值的两倍 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
IE 双边距Bug
老李 技术 专栏
11-04 4385
 一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：以下为引用的内容：.floatbox { float: left; width: 150px; height: 15
IE6双倍边距BUG
aihuaizhi9100的博客
01-12 105
不太喜欢用margin ， 一般都改用padding ， margin的兼容行没有pading好，但有时候却又不得不使用 例如：IE6中用了float:left之后导致margin-left双倍边距。解决办法加 display:inline 转载于:https://www.cnblogs.com/czj33499173/archive/2012/01/12/2320710.html...
IE6双倍边距bug
sh0109的博客
05-10 263
IE6双倍边距bug出现条件： 1.首先是块元素，内联元素不会出现此bug------所以以毒攻毒，使用display;inline;来讲此元素变为内联元素消除此bug 2.有浮动，脱离文本流 3.有外边距
解决IE6双倍边距BUG
weixin_33699914的博客
06-30 66
解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1）要为块状元素;2）要左侧浮动;3）要有左外边距(margin-left); 解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，代码如下： #redBlock{width:200px;height:200px;background:#900;margin-top:20p...
使用CSS Hack解决IE6双倍边距Bug
sh0109的博客
05-14 330
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
IE6双倍边距 IE6浏览器会出现双倍边距解决方法
09-25
在网页设计领域，IE6（Internet Explorer 6）双倍边距问题是一个历史悠久且让开发者头疼的兼容性问题。这个现象特指在IE6浏览器中，如果一个元素同时设置了浮动(float)属性和外边距(margin)，那么在实际渲染时，这个...
IE6盒子模型没问题 详测双倍边距
09-25
对于IE6的双倍边距bug，还有其他一些解决方案，例如使用`*margin` Hack，这是一种专为IE6设计的CSS技巧，将星号(*)放在属性前，可以使得该规则只对IE6生效。例如，`*margin: 0` 将只影响IE6，并且会覆盖正常的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兼容性问题及IE6常见bug详细汇总
09-25
2. **边距加倍问题**：当块元素设置左右浮动并有`margin`时，IE6会出现“margin双倍”现象。通过将元素的`display`属性设置为`inline`，可以消除这一问题。 3. **奇数字体大小和边框高度**：在IE6中，如果字体大小...
IE6的双倍,3px,注释引起的文字错位等几个BUG解决方法
12-13
本文将详细介绍几个与IE6相关的常见BUG及其解决方案。 首先，我们来看第一个问题，即“3px间距BUG”。当在IE6中，一个`div`元素使用背景图片或直接插入图片时，图片的下边缘会与下一行元素之间产生3px的空白间隔。...
XHTML学习
大河之犬的博客
09-20 410
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
html TAB切换按钮变色、自动生成table
TrueLink的博客
09-24 573
/ 为当前点击的按钮添加.active-tab类。/* 文本颜色变为白色，以便在蓝色背景上可见 */// 移除所有按钮的.active-tab类。/* 鼠标悬停时显示手指形状 */// 动态生成选项卡头部和内容。// 动态生成选项卡头部和内容。/* 选中时背景色变为蓝色 */// 默认显示第一个选项卡的内容。/* 增加内边距以便点击 */// 显示对应的选项卡内容。/* 初始背景色透明 *//* 添加一些间隔 */// 更多数据...// 更多数据.../* 简单的样式 */
HTML粉色烟花秀
兔子王
09-21 8111
HTML语言实现的粉红色跨年烟花秀的完整代码。
html TAB切换按钮变色、自动生成table--使用函数优化结构
TrueLink的博客
09-24 971
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px
HTML中的padding和margin
最新发布
学无止境
09-27 700
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值