浏览器样式兼容性问题及解决方式(一)
2017-07-01 19:09
197 查看
工作中常常会碰到浏览器样式兼容性的问题。从今天開始,收集和整理一些常见的兼容性问题,系统的学习下前端知识。欢迎大家指正交流。
PS:这样的设置透明度的方法会让内部的内容(如文字、图片)也变成半透明。而在一些需求中。 仅仅须要背景半透明,那就须要定义两个兄弟div,一个设置为半透明作为背景。还有一个作为内容,绝对定位到前面div的上面。当然。如今的CSS3标准在设置背景属性时同一时候能够设置背景的透明度了。
另外一种方法:在父容器内部末尾加一个div。引用clear类
1、浏览器默认的标签内外边距不同,用通配符*统一设置为0
*{margin:0px; height:0px;}
2、标签最低高度min-height不兼容
{min-height:200px; height:auto !Important; height:200px; overflow:visible;}
3、设置较小高度标签
当给指定标签设置较小高度时,就碰到与浏览器默认最小高度冲突的问题。解决办法就是设置overflow:hidden或line-height小于标签高度。4、透明度兼容性
.transparent_class { filter:alpha(opacity=50); /*IE下的透明度设置方法,仅仅对IE有效*/ -moz-opacity:0.5; /*主要针对老版本号的Mozilla 浏览器。如Netscape Navigator*/ -khtml-opacity: 0.5; /*老版本号Safari (1.x)的内核引擎使用的是KTHML*/ opacity: 0.5; /*这是当前标准的设置方法*/ }
PS:这样的设置透明度的方法会让内部的内容(如文字、图片)也变成半透明。而在一些需求中。 仅仅须要背景半透明,那就须要定义两个兄弟div,一个设置为半透明作为背景。还有一个作为内容,绝对定位到前面div的上面。当然。如今的CSS3标准在设置背景属性时同一时候能够设置背景的透明度了。
5、清除浮动的两种方法
第一种方法:直接在父容器引用clearfix类.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} .clearfix{display:inline-block;} .clearfix {display:block;}
另外一种方法:在父容器内部末尾加一个div。引用clear类
.clear{clear:both;height:0px;overflow:hidden;}
相关文章推荐
- CSS学些心得--解决各个浏览器样式显示的兼容性问题
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)
- 60安全浏览器可以通过指定内核的方式来解决兼容性问题。
- 解决不同浏览器下获取样式的兼容性问题
- 在Servlet中以下载的方式向浏览器写数据--中文文件乱码问题解决
- Extjs显示时间兼容性问题——firefox正常显示,IE不正常出现NaN-NaN-NaN的解决方式
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- WdatePicker时间改变事件(顺带解决有些浏览器下兼容性问题)
- 下载文件根据浏览器判断文件名,解决兼容性问题
- IE和火狐等浏览器关于 的兼容性问题解决
- 浏览器样式兼容性问题及解决方案(一)
- 解决firefox浏览器下,window.close()不能关闭容器的兼容性问题
- 关于CSS+DIV 开发 与各浏览器的兼容性问题及解决方法
- 浏览器关闭使session失效的问题多种解决方式
- 12个需要注意的规范样式写法解决浏览器兼容问题
- 支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)
- 12个需要注意的规范样式写法解决浏览器兼容问题
- 浏览器版本兼容性问题解决方案
- Html(css)样式控制浏览器的兼容性问题的相关教程
- 浏览器的兼容性问题解决方案