zoukankan      html  css  js  c++  java
  • 闪光字的处理

    前阶段做了一个简洁版博客,里面涉及到了闪光字(类似qq空间,百度空间里面的那样闪光字),处理的时候出现了一些问题,记录下。分析里面的原理,

    其实还是很深刻的。

    在标准模式下

    <!DOCTYPE HTML>
    <html >
    <head>
           <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
           <title></title>
    </head>
    <body>
    <DIV style="OVERFLOW: hidden; WORD-BREAK: normal" class=desc name="cmtcontent">
    <SPAN id="test" style="FILTER: glow(color=#0000FF,strength=2); COLOR: #ffffff;">测试</SPAN> </DIV>
    </body>

    </html> 

    无论怎么样都不显示,这个帖子我发到了经典论坛里面,终于有人提到说

    使用滤镜的元素必须拥有layout,span是个内联元素,无法通过定义高度获得layout,块元素就可以了。 

    这使我联想到了layout这个在ie下bug的大佬。

    如何触发layout 最简单的是zoom:1,添加后,果然很奏效,ie6,ie7都没有问题。但是ie8还是不显示。

    问题出来了。我上国外的那个网站上看了看,发现:

    Update: hasLayout has been removed from IE8 standards mode. It is still present in the IE7-compatibility mode. 

     大意是在ie8的标准模式中。haslayout 已经移除了。没有这个属性了。但是怎么解决ie8下显示的问题呢?

     我给这个元素添加了display:block或者display:inline-block。都可以。但是display:block在ie6下无效。

    看来即使是块状元素也是不行的。 

    怎么测试是否haslayout触发了呢?可以写javascript:alert(id.currentStyle.hasLayout)来判断。

    总结上面的,最后以添加了一个display:inline-block 告终,完美解决所有的浏览器问题。

    最后重新修正一下观点。使用滤镜的元素必须拥有layout ,块状元素不一定有layout。

    haslayout 是影响le bug的一个很大的方面,下文我来翻译下。。

     参考文章:http://haslayout.net/haslayout#zoomExplained 

    最后附上我研究的代码:

    <!DOCTYPE HTML>
    <html >
    <head>
           
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
           
    <title></title>
    </head>
    <body>
    <DIV style="OVERFLOW: hidden; WORD-BREAK: normal" class=desc name="cmtcontent">
    <SPAN id="test" style="FILTER: glow(color=#0000FF,strength=2); COLOR: #ffffff;display:inline-block">测试</SPAN> </DIV>
    <script>
    alert(test.currentStyle.hasLayout);
    </script>
    </body>
    </html>

  • 相关阅读:
    Python格式化输出%s和%d
    操作数据库
    协议类介绍
    并发和并行和压测 、对带宽的理解解释
    悠悠大神的 并发当前目录下所有文件的方法(还没试过)
    post参数的方法 json data 和特别的传参
    接口测试简介
    appium的三种等待方式 (还没实践过,记录在此)
    人生进步目标
    保持一个会话 添加 HTTP Cookie管理器
  • 原文地址:https://www.cnblogs.com/yupeng/p/2011188.html
Copyright © 2011-2022 走看看