您的位置：首页 > 网站优化 > css  >  DIV浮动IE文本出现3px间距的bug

DIV浮动IE文本出现3px间距的bug

 更新时间：2017年7月6日 23:13  点击：2376

发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有3px的空白误差。
没加修正：
运行代码框

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}

-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>离左边3px</p><p>离左边3px</p></div>
</body>
</html>

  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
修正过：(加了以下代码)

 代码如下 复制代码
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}

不考虑mac下ie5.02
运行代码框

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>现在没有3px了</p><p>现在没有3px了</p></div>
</body>
</html>
[!--infotagslink--]

相关文章

  • python Matplotlib基础--如何添加文本和标注

    这篇文章主要介绍了python Matplotlib基础--如何添加文本和标注，帮助大家更好的利用Matplotlib绘制图表，感兴趣的朋友可以了解下...2021-01-26

  • C#中的两种debug方法介绍

    这篇文章主要介绍了C#中的两种debug方法介绍,本文讲解了代码用 #if DEBUG 包裹、利用宏定义两种方法,需要的朋友可以参考下...2020-06-25

  • 解决idea中debug工具栏消失后如何显示的问题

    这篇文章主要介绍了解决idea中debug工具栏消失后如何显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-18

  • idea 无法debug调试的解决方案

    这篇文章主要介绍了idea 无法debug调试的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-09

  • 微信小程序 富文本转文本实例详解

    这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25

  • 解决tk mapper 通用mapper的bug问题

    这篇文章主要介绍了解决tk mapper 通用mapper的bug问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-16

  • C# 输出字符串到文本文件中的实现代码

    本文通过一个简单的代码给大家介绍C# 输出字符串到文本文件中，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧...2020-06-25

  • python docx的超链接网址和链接文本操作

    这篇文章主要介绍了python docx的超链接网址和链接文本操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-06

  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。对bootstrap 文本编辑器相关知识感兴趣的朋友一起学习吧...2016-04-06

  • Perl合并文本的一段实例代码

    Perl合并文本的一段实例代码，需要的朋友可以参考下...2020-06-29

  • pycharm debug 断点调试心得分享

    这篇文章主要介绍了pycharm debug 断点调试心得分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-16

  • 使用phpstorm和xdebug实现远程调试的方法

    vs的断点调试功能很强大有木有，能查看所有变量有木有。php调试很麻烦有木有，echo，var_dump写得你想吐了有木有。想体验一下ide调试的快感吗？那就来使用xdebug吧...2016-01-02

  • DIV浮动IE文本出现3px间距的bug

    发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有3px的空白误差。 没加修正： 运行代码框 代码如下 复制代...2017-07-06

  • IIS6 安全性存在超级BUG,快来看

    在IIS6中，创建一下test.asp;jpg的文件，是可以直接执行的...2016-01-27

  • 为什么出现“APACHE.EXE: cannot determine 

    由于Windows版本的Apache默认情况下不指定ServerName，所以运行时会出错。 解决的办法是修改Apache安装目录下的conf目录下的httpd.conf： - 搜索ServerName - 去掉前面...2016-11-25

  • php5中Xdebug配置安装步骤介绍

    Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具)，可以用来跟踪，调试和分析PHP程序的运行状况了，下面我们来看php5中Xdebug配置安装，希望能帮助到各位。 Xdeb...2016-11-25

  • Golang中Delve版本太低无法Debug的问题

    这篇文章主要介绍了Golang中Delve版本太低无法Debug的问题,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-16

  • ps怎么制作文本绕圈？ 10步骤轻松制作文字绕圈的教程

    PS如何让文字绕着圈显示呢？小编给大家带来了一篇简单的教程，教大家如何在PS软件中制作文字绕着圈显示，同学们快来看看吧 一提到ps就会想到图片处理，photoshop中有一个...2016-12-15

  • 使用 use re debug　查看正则表达式的匹配过程

    使用 use re 'debug' 查看正则表达式的匹配过程，参见如下的代码...2020-06-29

  • JavaScript中offsetWidth的bug及解决方法

    这篇文章主要为大家详细介绍了JavaScript中offsetWidth的bug及解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22