多浏览器开发需要注意的问题之一

最近在做项目多浏览器支援的时候,遇到了很多问题,然后就一个一个的去查询,解决。有些问题虽然不难,不过由于不是很熟悉W3C标准,所以在解决问题的时候还是花了很多时间,在这里记录下来,供自己以后查找方便也可以给大家一个解决的思路。

1、table中tr的显示问题:

  在firefox下,tr给了一个style=“displya:block”,结果显示的样式与自己要的效果不一致,这样显示的效果就是第二行与第一行的第一个单元格列宽相同,但是在IE下就没有这个问题,结果去网上找答案:

  1.1、当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。

  1.2、同一行反复的在"display:none;""display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

从网上搜了一下答案,说不通的浏览器对display属性的显示可能会不一致,不过如果用display="",这样就可以兼容IE和firefox了。

<table>
   <tr>
         <td>第一列</td>
         <td>第二列</td>
  </tr>
<tr style="display:none">
         <td colspan="2" bgcolor="red">第一列</td>
  </tr>
</table>

2、Javascript中的window.event对象在IE ChromeFirefoxSafari中的作用域是不一样

  在做控制textbox的输入问题的时候,写的一段JS在IE下运行时没有问题的,可是在FF,Chrome,Safari和Ipad下就不能运行了。在调试JS的时候,发现在FF下是找不到event的,如果需要用event需要在调用的时候传参,但是又不能每个调用的地方都改变,所以只能改公用的key_num_press方法。然后还有一个问题,在FF下,event.keyCode也是没有的,只能用event.witch,还有就是FF下阻止回发是这样的event.preventDefault();最后经过改动,这段JS写成了下面的第二种方式:

//原来的
function key_num_press() { if(event.keyCode>=48 && event.keyCode<=57 || event.keyCode==8 ) { return true; } else { //alert(event.keyCode); event.keyCode = 0; } } //修改后

function key_num_press()

{

    //判断是否为IE

    if(navigator.userAgent.indexOf("MSIE")>0)

    {

        if(event.keyCode>=48 && event.keyCode<=57 || event.keyCode==8 )

        {

           return true;

        }

        else

        {

           //alert(event.keyCode);

           event.keyCode = 0;

        }

    }

    else

{

    //找调用该方法的事件

        func=key_num_press.caller;

        while(func!=null)

        {

           //调用该方法的event

            var arg0=func.arguments[0];

            if(arg0)

            {

                if(arg0.charCode>=48 && arg0.charCode<=57 || arg0.charCode==8 )

                {

                   return true;

                }

                else

                {

                   //防止回发(不让该字符输入到checkbox)

                   arg0.preventDefault();

                }

            }

            func=func.caller;

        }

    }

}

3、服务器控件设置width="0";height="0"在IE下不显示的,可是在其他浏览器下都会显示一个黑点

解决方法:设置服务器控件的display:none属性就OK了。

  

 

  

posted @ 2012-08-26 14:17  kevin_h_wang  阅读(274)  评论(0编辑  收藏  举报