当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
可以通过以下的办法来解决：
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之 间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div>& lt;/div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin- right: -3px;或者更小。
7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->
分享到：
相关推荐
本文主要探讨了针对IE浏览器，尤其是IE与Firefox之间存在的CSS兼容性问题，并提供了一些解决方案和编写高效、维护友好的CSS代码的规范。 一、使用CSS方法 遵循W3C标准编写CSS，避免使用非标准或过时的属性，这将有...
本文主要探讨了几个常见的CSS在IE浏览器中的BUG及其解决方案。 1. **错误的扩展与min-height** - 在IE6中，设定`height`或`width`为固定值时，如果内容超出这个值，div会自动扩展，而在其他标准浏览器中，div的...
以下是一些针对IE浏览器的CSS常见bug及解决策略： 1. **浮动元素的双倍margin问题**： 在IE6中，如果一个浮动元素设置了margin属性，可能会导致实际的外边距比预期的要宽一倍。为了解决这个问题，可以将浮动元素的...
这主要是由于IE9和IE10对某些CSS特性支持不足以及对文件加载机制的差异导致的。本篇将详细解析这个问题及其解决方案。 首先，我们需要理解IE9和IE10对CSS的处理方式。这两个版本的IE采用了不同的渲染引擎，与现代...
本文将深入探讨“CSS3文字特效”，特别是“CSS3火焰文字”以及“CSS3文字渐变代码”的实现方法。 一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-...
"Arctext弧形文字效果插件（CSS3&jQuery）"正是这样一款工具，它结合了现代Web开发中的两种关键技术——CSS3和jQuery，来实现文字沿弧线排列的动态效果，为网站增添独特的视觉吸引力。 首先，让我们深入了解一下CSS...
【纯CSS3炫酷3D浮雕质感文字动画特效】是一种利用现代Web技术实现的创新设计，它展示了CSS3的强大功能。在这个特效中，设计师通过CSS3的特性，如3D变换、过渡和动画，创建出仿佛从石板上雕刻出来的文字效果，同时...
【标题】：“CSS文字组成肖像插图网页特效.rar” 【描述】：“CSS文字组成肖像插图网页特效.rar”这个压缩包文件包含了一个利用CSS技术实现的独特网页设计效果，即通过排列和组合文字，创建出一个人物肖像插图。...
### CSS 文字投影知识点 #### 一、CSS3 `text-shadow` 属性 在现代Web开发中，`text-shadow` 属性是实现文字投影效果的主要方法。它允许开发者为页面中的文本添加阴影，从而增强文本的视觉效果。下面将详细介绍 `...
《CSS3文字上下滚动切换特效详解》 在网页设计中，动态效果的运用能极大地提升用户体验，其中文字滚动切换特效就是一个常见的元素。本篇文章将详细解析"css3文字上下滚动切换特效"，并探讨如何利用jQuery和CSS3实现...
### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展，浏览器种类日益增多，其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期，IE6、IE7 和 ...
在现代网页设计中，CSS3引入了许多新的特性和功能，其中包括对文字动画的支持。在本主题中，我们将深入探讨"几款酷炫的CSS3文字动画特效"，以及如何通过Splitting库来实现这些效果。 1. CSS3文字动画基础 CSS3的...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”，这揭示了在Web开发中，尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时，开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为，...
css渐变代码,代码兼容各个浏览器，适用于ie7以上及各主流浏览器
在IE8中，由于其对CSS2.1标准的支持不完整，以及特有的盒模型、滤镜等特性，常常会导致现代网页设计在该浏览器上出现问题。以下是一些关键的CSS知识点和解决策略，以确保在IE8中获得良好的兼容性： 1. **条件注释**...
随着技术的发展，CSS3引入了许多新的特性和功能，其中包括艺术文字样式效果。本篇文章将深入探讨如何使用纯CSS3创建艺术文字效果。 一、CSS3的艺术文字基础 1. 文字阴影（text-shadow）：通过添加阴影，可以为文字...
"iebug总结jar包"是一个专门针对这些问题的资源集合，它包含了处理IE bug的相关资料，特别是针对IE6的解决方案。以下是基于这个主题的详细知识点： 1. **IE6的渲染引擎**：IE6使用的是Trident渲染引擎，它与现代...
标题中的“ie-css3(让ie6 ie7 ue8支持css3).rar”指的是一个针对Internet Explorer（IE）浏览器的解决方案，尤其是版本6、7和8，这些版本不原生支持CSS3的新特性。这个压缩包包含了一个名为“ie-css3(让ie678支持css...
### 最常见的9种IE_css_bug及fix：深入解析与解决方案 #### 1. 居中布局问题 在Web开发中，将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标，但在IE6中，这种方法却会遇到问题。...
CSS3的引入极大地扩展了其前辈CSS2的功能，尤其是在文字特效方面，它提供了丰富的可能性，使得网页设计者可以创造出极具艺术感的文字样式。"CSS3文字特效艺术文字样式代码.zip"这个压缩包文件显然是为了展示如何利用...