专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

ie

  • 升级IE11后 的一些问题

    / 分类: 开发 / 2 Comments

    主要针对开发人员使用的一些障碍

    1. F12开发人员工具
    "仿真"面板只有"文档模式"(可切换IE7-IE10), 去掉了"浏览器模式"(IE8-IE10), 主要的影响就是:
    彻底不支持IE的条件注释了(虽然IE10的标准模式就已经不支持, 但IE10下支持切换"浏览器模式").
    所以IE11下面无论怎么设置都不支持[if gte IE xx]这样的条件注释了, 如果条件注释里加载了css/js, 在IE11测试IE7-IE9就只能暂时把条件注释去掉了.
    测试用IETester v0.52(windows8.1), IE9会崩溃IE10不能用, IE7/8貌似是正常的.
    再就是安装虚拟机了(www.modern.ie/zh-cn/virtualization-tools有很多版本可以下载), 硬盘不够大的情况为了测试安装几个windows是很浪费的~
    当然这3中方法测试IE体验都不够好, 如果一个平台就能解决那是最好不过了, 谁有更好的解决方案可以共享下~
    另外, 切换IE11文档模式来测试css/js都是正常的(比如IE8模式的canvas是不支持的), 所以这部分应该是没问题的.

    2. 代理服务器
    依然不能用SOCKS 5的代理. 还是需要使用HTTP方式, 而且必须要取消勾选"选项-高级-启用增强保护模式"并重启浏览器才可以使用代理.

  • 发现了一个IE6的2个form嵌套bug

    / 分类: 开发 / No Comments

    如果网站是.net程序的话,body下面紧跟着就是一个form,因此页面出现两个form的几率很高。在做公司目前的一个项目时,发现当在网页中加进去一个form后,用IE6测试时,发现加进去的form后面的文字变成居中对齐了。比如下面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
    <style>
    body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
    body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 
    
    #body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
    #body div{text-align:left;} 
    </style>  
    </head>  
      
    <body>  
    <form>第一个form 
        <div id="body">  
            <div>  
                <form>第二个form:这是一个神奇的Form,这个form下面的内容,IE6会居中显示,继承了body的text-align:center(#body:{text-align:left}没有起到作用)。删除这个form后,会发现ie6下下面的内容都变成正常的左对齐了。 
                </form>  
                此现象应该是form内又嵌套了一个form所导致。 
            </div>  
            <div>这里的内容,要再设置一次:#bd div{text-align:left;} ie6才会左对齐</div>  
            <h2>这里的内容IE6居中了</h2>  
        </div>  
    </form>
    </body>  
    </html>  

     由于以前接触的基本都是php的程序,从来没遇到过这样的情况,.net把body间的内容用一个form给包含了,当里面再加进去一个form后,上面描述的问题就出现了。

    我想到的解决办法就是:

    1、 把css里body的text-align:center;修改成:text-align /*IE5.5 only*/:center; (这里没照顾ie5.0),由于IE5、IE6都识别前面加下划线“_text-align:”这个hack,所以这个hack在这里也用不上(以前还以为加下划线只有IE6能识别)。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

    2、狠下心把body的text-align:center删掉也能解决,但是ie5就。。可惜IE5还有极少数的人在用。。

    3、<!--[if IE 6]> body{text-align:left;} <![endif]--> 或者 * html body{text-align:left;}/*IE6/ie7都识别*/

    4、重设#body下面的元素,#body div, #body h2{text-align:left;} 

    在实践中上面的四种方法都可能用到,个人更偏向于第三、四种方案。

     另外发现我blog的字体,在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体,等宽主要是方便用vim的时候选择,还有bug 所以还不能发布,等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体,所以才萌生了自己做的想法。这个合并字体搞了很久,也搞的很郁闷,制作字体的时候CUP经常100%,终于发现我的电脑年纪不小了。。英文使用DejaVu,是因为最喜欢它的等宽字体,Consolas、Monaco、Bitstream等等好多等宽字体测试后,发现DejaVu的效果是最好的,1、l和0、o、O很容易区分(dejavu也是Bitstream出的他们很接近)。

  • IE与Firefox的CSS兼容

    / 分类: 开发 / No Comments

    这里只记录了自己经常忽略的。

    1.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
    2.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
    4.让高度能自动适应,要在wrapper里面加上overflow:hidden;
    当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:.colwrapper{
    overflow:hidden;
    zoom:1;
    margin:5px auto;}
    5、margin加倍的问题。 
    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
    解决方案是在这个div里面加上display:inline;
    例如:#IamFloat{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/}