javascript 开发之网页兼容各种浏览器


Posted in Javascript onSeptember 28, 2017

javascript 开发之网页兼容各种浏览器

前言:

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.

一、CSS HACK

以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

注意:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]

将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

三、其他兼容技巧(再次???

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

P.S 至于IE5以及其他浏览器就没有必要兼顾了. 在这上面花时间不值得.

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JS求平均值的小例子
Nov 29 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 #Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 #Javascript
微信小程序下拉刷新界面的实现
Sep 28 #Javascript
详解Vuex中mapState的具体用法
Sep 28 #Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 #Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 #Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 #Javascript
You might like
php 用sock技术发送邮件的函数
2007/07/21 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
对Django外键关系的描述
2019/07/26 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
is_file和file_exists效率比较
2021/03/14 PHP
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
商场周年庆活动方案
2014/08/19 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android