zoukankan      html  css  js  c++  java
  • web开发未解之谜

    /*from:http://www.cnblogs.com/cloudgamer/archive/2008/07/27/1252308.html */

    ie7的li:hover问题

      

    <!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" lang="zh-CN"> 
    <head> 
    </head> 
    <body>
    <style type="text/css">  
    #list span 
    { left:-999em;position: absolute; } 
    #list:hover span, #list.on span 
    { left:auto; }
    </style> 
    <ul> 
    <li id="list">产品介绍<span>产品一</span>  
    </li> 
    </ul> 
    <input type="text"/>
    <script>
    var o = document.getElementById("list"); 
    o.onmouseover
    =function() { this.className="on"; }
    o.onmouseout
    =function() { this.className=""; } 
    </script> 
    </body> 
    </html>

     ie6和ff都很正常

    但ie7就有问题,当把光标放在文本框中,然后再把鼠标放在菜单上,弹出来的菜单就不会消失了

    解决方法是去掉#list:hover或者加一个样式在onmouseout中设置

    但未知什么原因

    ie6的line-height失效问题

    <!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>
    </head>
    <body>
    <style="line-height:30px;"> 服务:
      
    <input name="" type="text"/>
      
    <br />
      特别推荐:
      
    <input name="" type="text"/>
      
    <br />
      交通停车:
      
    <input name="" type="text"/>
    </p>
    </body>
    </html>

    ie7和ff显示正常
    但ie6的line-height就没效果

    未知解决方法,未知原因

    ie高度设置问题

    <!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; charset=gb2312" />
    <title>无标题文档</title>
    <body>
    <style type="text/css">
    *
    { padding:0px; margin:0px;}
    html,body
    {overflow:hidden;height:100%; width:100%;}
    </style>
    <table style="100%; height:100%;" border="1" cellspacing="0" cellpadding="0">
      
    <tr>
        
    <td style="height:100px;">22222222222</td>
      
    </tr>
      
    <tr>
        
    <td>mid</td>
      
    </tr>
      
    <tr>
        
    <td style="height:100px;">111111111</td>
      
    </tr>
    </table>
    </body>
    </html>

    这是一个全屏的三层样式

    ff的效果应该是正确的
    但在ie里上下两块的高度都不是设定的100px

    未知原因,未有解决方法

     js的正则问题

    function a(val) 

      
    var re = /^/d+$/g;
      alert(re.lastIndex);
      
    return re.test(val); 

    alert(a(
    5)); 
    alert(a(
    6));

    用ie的话是0 true 0 true
    用ff的话是0 true 1 false

    原因没有弄清楚

    不过直接用new RegExp的方法能解决

    ie透明背景问题

    ff中正常,在ie中点击div中文字以外的部分会没反应。

    如果有background-color就没问题,未知原因。

    document.body.appendChild()导致IE已终止操作

    以下代码会导致在ie出错“已终止操作”,ff中是没问题的:

    但脚本如果不套在div里面又没问题,

    未知原因,估计跟dom有关(网上说是跟body的加载顺序有关)。

    解决方法是body加载完之后执行(ie特有的document.body.onload),或用insertBefore代替,例如:

    document.body.insertBefore(obj, document.body.childNodes[0]);



    ie的table的td的宽度问题

    转载请注明出处:http://www.cnblogs.com/cloudgamer/

    以上3个table的结构是一样的其中都有一个td是100宽度只是内容不同,
    在ff中3个table显示的效果是一样的,但用ie看会发现第一第二个table会无端多出一段空白

    解决方法:给table添加样式table-layout:fixed;,未定义时,单元格宽度会按内容宽度的比例自动调整。

    ie6/7的hr行距问题

    <!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">
    <body>
    1111111111111111111111111111111
    <hr style="margin:0; padding:0;"/>
    22222222222222222222222222222222
    </body>
    </html>

    即使给hr设置了margin和padding都是0,但ie6和ie7还有有一个间距。
    未知原因,未找到解决方法,建议用div的border模拟。

     
    IE8的链接触发问题

    <!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>
    <style type="text/css">
    a:hover {
        background:#
    000;
    }
    </style>
    </head>
    <body>
    <div style="border:1px solid #1633bf;"> <a href="#">测试1</a> <a href="#">测试2</a> </div>
    </body>
    </html>

    用ie8鼠标在“测试2”后面移动,居然会触发“测试1”的hover。
    未知原因,未有解决方法。

    ie的a元素的innerHTML的bug
    比较两次alert的结果:


    有@的链接,内容变成href的内容,未知原因,解决方法是在修改的链接前面加上一个空格(即:" "+href)。

    ie6的!important的bug
    ie6运行下面代码:

    <!DOCTYPE html>
    <html>
    <body>
    <style>
    #t{font
    -size:20px}
    .t{ font
    -size: 12px !important; }
    </style>
    <div id="t" class="t">test</div>
    </body>
    </html>


    可以看到是以12px显示的,可见!important能正常执行,再看下面代码:

    <!DOCTYPE html>
    <html>
    <body>
    <style>
    .t{ font
    -size: 12px !important;font-size:20px}
    </style>
    <div class="t">test</div>
    </body>
    </html>


    这里却以20px显示,说明!important在这里失效了,该bug常用来对ie6做hack,但要注意只能用在同一个{}内。

  • 相关阅读:
    manjaro 安装mysql
    Ubuntu安装Redis
    Ubuntu安装docker
    VirtualBox 安装 Ubuntu虚拟机 显卡驱动
    ubuntu 卸载软件
    Linux下环境变量设置的三种方法:
    error: open of glibc-devel-2.12-1.132.el6.i686.rpm failed: 没有那个文件或目录
    ip地址0.0.0.0与127.0.0.1的区别(转载)
    cmake的安装和卸载
    qmake 提示 Failure to open file:****
  • 原文地址:https://www.cnblogs.com/kofkyo/p/2297298.html
Copyright © 2011-2022 走看看