举例IE浏览器不兼容问题及解决方案

清除IE10下input的叉叉(X)和密码输入框的眼睛图标

从IE10开始,input输入框中,type=”text”时,输入框最后会自动生成一个小叉号,type=”password”时,输入框最后会生成一个小眼睛,以方便用户清除已输入文本及查看按钮。

 

但是在个人项目中,并不需要这个小眼睛按钮,并了解到了使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮

input::-ms-clear{display: none;}//清除小叉号
input::-ms-reveal{display: none;}//清除小眼睛

如下为清除前后对比:

举例IE浏览器不兼容问题及解决方案_第1张图片

举例IE浏览器不兼容问题及解决方案_第2张图片

IE8下图片等比例缩放HEIGHT高度不变的解决方法

在项目中,使用max-hight限制图片高度,但是图片仅是高度被缩放了,而宽度仍旧不变,显得非常难看,如下图:

查阅资料发现:

对于 IE 8,如果不使用加 meta 标签的方法,那么就需要在第一个 CSS 样式中补充一个“width:auto;”,才能正常实现限制最大宽度的图片等比例缩放。如下:

.img-set {

    width:auto;

    max-height: 80px;

    margin-left: 100px;

    margin-top: -80px;

    border: 1px solid #eee;

    border-radius: 5px;

}

举例IE浏览器不兼容问题及解决方案_第3张图片

举例IE浏览器不兼容问题及解决方案_第4张图片

你可能感兴趣的:(前端)