【技术新闻】程序员眼里IE浏览器是什么样的?

PS: 在没有搞网站开发的时候,用IE浏览器用的比较多,但是现在比较喜欢用谷歌浏览器,感觉谷歌浏览器,第一:看上去清爽(不像有的浏览器绑定了很多广告链接);第二: 网页元素的查询(开发者工具)特别方便!

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。就在几年前,IE还是最主流的web浏览器。但现在形势完全不同了,人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

反射弧有点长…

如何区分 HTML 和 HTML5

如果浏览器是一种枪

成长的烦恼

主流浏览器的用户群

浏览器猜猜看

来源于51cto.

【css】解决IE浏览器对于定位的问题

在写discuz x2的图片展示的插件的时候,遇到了一个问题:就是在图片的两侧都有一个切换的按钮,当点击按钮的时候进入到一张图片。看下图:

但是问题就来了,在火狐以及谷歌浏览器上测试时没有问题的,而在IE浏览器上测试的则不显示出来。代码如下:

html代码:

<div id=”JImgShow”>

<div id=”JImgLeft”>

<a href=”#” ></a>

</div>

<div id=”JImgRight”>

<a href=”#” ></a>

</div>

<img class=”Jshowimg” src=”{$GLOBALS[‘hrg_twshow_showpic’]}” />

</div>

css代码:

#JImgShow{position:relative;}

#JImgShow img.Jshowimg{width:957px;height:600px;z-index:-1;position:absolute;top:-1px;left:0px;}

#JImgLeft,#JImgRight{width:475px;height:600px;cursor:pointer;background:#fff;filter:alpha(opacity=0);opacity: 0.0;-moz-opacity:0.00;}

#JImgLeft{float:left;}

#JImgLeft a{display:none;width:102px;height:95px;margin-top:252px;margin-left:10px;background:#fff url(../img/Right.png) no-repeat;}

#JImgLeft:hover a{display:block;}

#JImgRight{float:right;}

#JImgRight a{position:absolute;float:right;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat;}

#JRRight{display:none;position:absolute;top:0px;right:0px;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat;}

#JImgRight:hover a{display:block;}

测试了很久,最后给对应的DIV设置背景颜色,IE浏览器就识别了。

既然通过背景颜色就可以解决这个问题,于是我就采用把div中的a标签移出来,然后将div设置背景颜色,但是透明度为0.如果不将a标签移出来,a标签对应也是透明。然后再将a标签定位出来。看如下代码:

html代码:

<div id=”JImgShow”>
<div id=”JImgLeft”>
</div>
<a href=”#” id=”JLLeft” ></a>
<div id=”JImgRight”>
</div>
<a href=”#” id=”JRRight” ></a>
<img class=”Jshowimg” src=”{$GLOBALS[‘hrg_twshow_showpic’]}” />

css代码:

#JImgShow{position:relative;}

#JImgShow img.Jshowimg{width:957px;height:600px;z-index:-1;position:absolute;top:-1px;left:0px;}

#JImgLeft,#JImgRight{width:475px;height:600px;cursor:pointer;background:#fff;filter:alpha(opacity=0);opacity: 0.0;-moz-opacity:0.00;}

#JImgLeft{float:left;}

#JLLeft{position:absolute;top:0px;left:0px;z-index:1;display:none;width:102px;height:95px;margin-top:252px;margin-left:10px;background:url(../img/Right.png) no-repeat!important;}

#JImgRight{float:right;}

#JRRight{display:none;position:absolute;top:0px;z-index:1;right:0px;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat!important;}

测试OK了。虽然不知道此方法如何?但是解决了这个问题。记下已备下次所用。