css文字重复ie bug导致文字的奇怪复制

2016-02-19 19:50 9 1 收藏

get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是css文字重复ie bug导致文字的奇怪复制，一起来学习了解下吧！

【 tulaoshi.com - Web开发】

当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名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/div。
　　　4、去除文字区块的固定宽度，与3有相似之处。
　　　5、有的人在猪后加一个br /或者空格，但只是消除现象。
　　　6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
　　　7、注释可以这样写：!--[if !IE]Put your commentary in here...![endif]--

资料引用:http://www.knowsky.com/441103.html

来源:http://www.tulaoshi.com/n/20160219/1621939.html

上一篇：指南从MySQL转向ADODB的方法
下一篇： MySQL数据库的授权原则

看过《css文字重复ie bug导致文字的奇怪复制》的人还看了以下文章更多>>

css实现文字的自动隐藏

标签： Web开发

不可换行 NOBR/NOBR （不换行） overflow 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无语法： overflow : visible | auto | hidden | scroll 参数： visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : ...

CSS高级文字排版的实例代码

标签： Web开发

css 文字排版一向困扰做页面前台工作者，这里汇总了大部分文字的实现效果大家可以举一反三的去运用。 !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; chars...

CSS教程:CSS控制网页文字排版实例

标签： Web开发

CSS功能的强大在webjx.com中早已经展现很多，而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。 h3.reflect_1 { color: #333333; border-bottom: 6px solid #DDDDDD; line-height: .2em; margin: 0; padding:0 0 0 10px; font-si...

CSS解决文字环绕图片问题

标签： Web开发

上图是美工为一站点制作的图文并茂的新闻标题列表，采用表格进行布局，右上和下部分分布在两个单元格中，程序实现起来可不太容易：要么分两次查询，一次取4条，一次取5条；要么一次取出9条，再分在两个单元格中显示。能不能通过设置图片的属性，让文字和图片像Word中一样可以四周环绕对齐？这样程序就不用理会图片，只负责一次读取显示就...

CSS技巧:网页文字渐变效果

标签： Web开发

本文介绍的技术很经典，也算是一篇老文章了，相信很多人也都看过，之前神飞有注意到国内有些翻译，但是不全面，这里我就将其完整的翻译了一下。你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一...

查看更多精彩>>