IE6的bug深入了解——css文字重复

工作了后接触IE6的BUG的机会多了很多,我也意识到只能根本的了解为何会触发这个BUG,如何解决,如何避免才能够节省时间,提高效率,避免加班!哈。

    于是,趁着放年假整理了一下IE6文字重复的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=utf-8" />
<title>多了一只猪</title>
</head>
<body>
<div >
<div ></div> 
<!-- -->
<div >IE6,洗洗睡吧</div>
</div>
</body>
</html>
    为什么会触发这个BUG?因为在 当多个浮动的元素紧紧跟随的时候,在中间加注释就会触犯,往往是最后一个浮动元素内的文本复制到最下面去,而溢出文字的字数=注释的条数*2-1。BUG与注释文字的位置、块 区 的浮动以及文字块 区 的固定宽度都有联系。 学名叫Duplicate Characters Bug,英文好的可以查查这个学名。IE6解析得真让人蛋疼,连注释解析都容易出问题。所以HTML里尽量避免写注释吧。那如果非得要注释呢?

下面给出解决方法:
        1、不放置注释。最简单、最快捷的解决方法
   2、注释不要放置于2个浮动的区块之间。
   3、将文字区块包含在新的<div></div>之间,如:<div ><div>↓这就是多出来的那只猪</div></div>。
   4、去除文字区块的固定宽度,与3有相似之处。
   5、有的人在猪后加一个<br />或者空格,但只是消除现象。
   6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。
   7、注释可以这样写:<!--[if !IE]>将注释放到这里<![endif]-->

转载于:https://www.cnblogs.com/I-am-fine/archive/2011/10/24/2222843.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现CSS文字跑马灯无缝衔接,可以使用CSS3的动画特性和伪元素来实现。以下是一个示例代码: HTML代码: ``` <div class="marquee"> <span>This is a demo of CSS Marquee</span> </div> ``` CSS代码: ``` .marquee { position: relative; overflow: hidden; white-space: nowrap; } .marquee span { position: absolute; left: 100%; display: inline-block; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` 解释: - `.marquee` 元素的 `position` 属性设置为 `relative`,以便让内部元素 `span` 的绝对定位相对于 `.marquee` 元素。 - `.marquee` 元素的 `overflow` 属性设置为 `hidden`,以隐藏 `span` 元素超出父元素的内容。 - `.marquee` 元素的 `white-space` 属性设置为 `nowrap`,以防止换行。 - `.marquee span` 元素的 `position` 属性设置为 `absolute`,以便让它们相对于 `.marquee` 元素的左边界定位。 - `.marquee span` 元素的 `left` 属性设置为 `100%`,以便让它们开始时从父元素的右侧进入。 - `.marquee span` 元素的 `display` 属性设置为 `inline-block`,以便让它们在同一行显示。 - `.marquee span` 元素的 `animation` 属性定义了动画名称、持续时间、动画速度和循环次数。 - `@keyframes marquee` 定义了动画的关键帧,从 0% 到 100% 分别表示动画的开始和结束状态。在这个例子中,我们使用 `transform: translateX()` 属性将 `span` 元素向左移动,从而实现了文字跑马灯效果。 通过以上代码,你可以实现一个CSS文字跑马灯无缝衔接的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值