浏览器兼容问题与解决方法
2018-06-24 00:59:37来源:未知 阅读 ()
浏览器兼容问题是指,不同厂商开发的浏览器针对同一段代码的不同解析,造成页面展示效果出现差异的情况,很多时候为了追求显示效果的一直,前端开发人员就要针对不同兼容问题应用相应的方法处理,达到效果一致的目的。
下面这些是平时开发过程中遇到的,做个汇总,方便查阅。
.target{ min-height:100px; height:auto!important; height:100px; // IE6下内容高度超过会自动扩展高度 }
ol
内li
的序号全为1,不递增。display: list-item;
- 将图片转换为块级对象
- 设置图片的垂直对齐方式
- 设置父对象的文字大小为0px
- 改变父对象的属性
- 设置图片的浮动属性
让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素,代码如下:
#top{ position:fixed; _position:absolute; bottom:0; right:20px; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
right 跟 left 属性可以用绝对定位的办法解决,而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute;中的_符号只有 IE6 才能识别,目的是为了区分其他浏览器。
上面的只是一个例子,下面的才是最重要的代码片段:
#top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } /*使元素固定在浏览器的底部*/ #top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }
这两段代码只能实现在最底部跟最顶部,你可以使用 _margin-top:10px; 或者 _margin-bottom:10px;修改其中的数值控制元素的位置。
现在,问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入:
*html{ background-image:url(about:blank); background-attachment:fixed; }
其中 * 是给 IE6 识别的。
26、IE6 7 8不支持background-size
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/image/xxx.jpg'
, sizingMethod=
'scale'
);
.filter { /*background: #ce4138; */ background: rgba(211, 66, 55, 0.93); filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#a3ce4138',endColorstr = '#eece4138' ); }
29、IE5-8不支持opacity,处理办法:
.opacity{ opacity:0.4 filter:alpha(opacity=60);/* for IE5-7 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* for IE 8*/ }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:伪类元素实现可伸缩时间轴
下一篇:html5 新特性
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- 关于浏览器兼容问题 2020-05-27
- 安装了https ssl证书,但浏览器显示并非完全安全(此页面内 2020-05-12
- 谷歌浏览器安装和开发者工具 2020-05-04
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash