html 4.0网站兼容性,浏览器兼容性_weixin_39933724的博客-程序员宅基地

技术标签: html 4.0网站兼容性  

前端开发遇到的浏览器兼容性问题

产生这个问题的主要原因是不同浏览器的内核不同,对网页的解析结果就产生了差异。

解决浏览器兼容性问题,主要从三方面考虑:html, css, js.

html部分

1. 调用CDN的html5shiv。html5shiv.js可以实现让IE低版本浏览器识别并支持html5标签。

2. img标签在图片不存在的情况下,各浏览器的解析不一致。在chrome下显示的是一张破损的图片,在firefox下显示的是alt的文字,而在IE中显示的是破损的图片加文字。

3. ul标签内外边距问题。ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0。

css部分

1. css的hack问题。主要针对IE的不同版本,不同版本的写法不同:

2. IE6双边距问题。IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍,解决办法:display:inline。

3. IE6下图片的下方有空隙,解决方法:给img设置display:block。

4. IE6下两个float之间会有个3px的bug,解决办法:给右边的元素也设置float:left。

5. IE6下没有min-width的概念,其默认的width就是min-width。

6. IE6下使用margin:0 auto,无法使元素居中,解决办法:为其父容器设置text-align:center。

7. 被点击过后的超链接不再具有hover和active属性。解决办法是按“lvha”的顺序书写css样式:

":link": a标签还未被访问的状态;

":visited": a标签已被访问过的状态;

":hover": 鼠标悬停在a标签上的状态;

":active": a标签被鼠标按着时的状态。

8. 在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序。

9. IE6下无法设置1px的行高,原因是由其默认行高引起的,解决办法:为其设置overflow:hidden;或者line-height:1px。

10. 不同浏览器的标签默认的外补丁和内补丁不同,解决方案:css里 *{margin:0;padding:0;}

js部分

1. 标准的事件绑定方法函数为addEventListener,但IE下是attachEvent。

2. 事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准。

3. 我们常说的事件处理时的event属性,在标准浏览器其是传入的,IE下由window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement。

4. 在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值是与1900的差值。比如:var year= new Date().getYear(),在IE中会获得当前年,但是在firefox中则会获得当前年与1900的差值。

5. ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject。

6. IE中不能操作tr的innerHtml。

7. 获得DOM节点的父节点、子节点的方式不同,其他浏览器:parentNode,parentNode.childNodes,IE:parentElement,parentElement.children。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39933724/article/details/118041728

智能推荐

java汉诺塔问题(递归求解)_狮子座的小爪洼的博客-程序员宅基地

汉诺塔问题是一个经典的问题。汉诺塔(Hanoi Tower),又称河内塔,源于印度一个古老传说。大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定,任何时候,在小圆盘上都不能放大圆盘,且在三根柱子之间一次只能移动一个圆盘。问应该如何操作?首先我们尝试一下集中可能:n为圆盘...

Java+Selenium WebDriver 元素操作(五)_八戒媳妇的博客-程序员宅基地

一、WebDriver API简单元素操作定位元素之后,需要对元素进行操作,WebDriver中最常用的几个方法如下(1)、clear()清除文本输入框的内容driver.findElement(By.id("idInput")).clear(); //清空输入框内容登录框内一般会默认有“账号”等提示信息,如果直接向输入框中输入数据,则会和输入框的信息拼接,从而造成输入信息错误,这个时候就可以使用clear()方法来清除输入框中的默认提示信息(2)

android gson+okhttp3+gsonformat实现网络_山药好吃的博客-程序员宅基地

Activitypackage org.ninetripods.mq.asdasdasdasdasdas;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.Log;import android.view.View;import andr

matlab高斯消去,高斯消去、追赶法 matlab_小小支呀的博客-程序员宅基地

1. 分别用Gauss消去法、列主元Gauss消去法、三角分解方法求解方程组 程序:(1)Guess消去法:function x=GaussXQByOrder(A,b)%Gauss消去法N = size(A);n = N(1);x = zeros(n,1);for i=1:(n-1)for j=(i+1):nif(A(i,i)==0)disp('对角元不能为0');return;endm = A(...

ARP欺骗(完全版)_aopingying8163的博客-程序员宅基地

在讲ARP欺骗之前先讲讲什么是ARP以及ARP欺骗的原理吧。一、 什么是ARP?arp英文全称: address resolution protocol 中文:地址解析协议它的作用:是根据IP地址获取获取物理地址的一个TCP/IP协议。 主机发送 信息的时候将一个包涵目标主机的IP地址的ARP请求通过广播到网络上所有的主机,并且接受返回信息,以此来确定目标的物理...

JAVA中去除字符串中的空格_DAdsh#e13mcdf的博客-程序员宅基地_java去掉字符串中间的空格

1.String.trim();是去掉首尾空格2.str.replace("","");去掉所有空格,包括首尾、中间String str = " hell o "; String str2 = str.replaceAll( " ", ""); System. out.println(str2); 3.replaceAll("+","");去掉所有空格4.str=.replaceAll("\\s*","");...

随便推点

android摄像头图像增强,Android Camera-CameraView和CameraX使用_科学声音的博客-程序员宅基地

前面两篇介绍了Camera1和Camera2的使用,发现Camera API从1到2的变化非常大,Camera2的复杂度提升了不少,官方为了让我们更容易使用Camera,出了个一个官方的库cameraview。不过这个库已经Deprecated,官方建议使用Jetpack CameraX 替代。本篇文章就介绍下CameraView和CameraX的使用CameraViewCameraView的目的...

linux-vsftp基础1_weixin_33859844的博客-程序员宅基地

资源共享的服务器1.ftp: 跨平台,支持tcp/ip的平台就可以,使用ftp协议2.Samba: 使用smb协议linux<->windows资源共享3.nfs: 使用rpc协议远程访问协议Server种类:Windows1) iis2) server-uLinuxWu-ftpVsftpdPureftp...

报错 :类型转换问题 java.lang.String cannot be cast to java.lang.Integer] with root cause_风小萧的博客-程序员宅基地

上报错Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Integer] with root causejava.lang.Cla

vs2017不支持python语言代码格式化_weixin_39202719的博客-程序员宅基地

折磨了一天都未能解决VS2017格式化python代码的问题。VS2017版本:1 尝试过修改快捷键2. 重置快捷键3. 网上各种旧版格式方法VS2017 代码格式化,快捷键为“ Ctrl+k,Ctrl+d"python 代码如下: print语句格式偏右(占用8个空格),执行格式化后代码未发生变化c++代码如下: 格式化代码成功   ...

转:常用端口号大全_hellohorizon的博客-程序员宅基地

http://xiaolijuan666.blog.163.com/blog/static/143469502007811104728853/ 一些常用端口列表计算机常用端口一览表:1 传输控制协议端口服务多路开关选择器 2 compressnet 管理实用程序 3 压缩进程 5 远程作业登录 7 回显(Echo) 9 丢弃 11 在线用户 13 时间

汇聚技术与能力,共绘区块链远大蓝图!_CSDN云计算的博客-程序员宅基地

进入数字经济时代,云已成为数字经济的一个最重要的基础设施。区块链,作为跨产业数字生态的连接器,是数字经济时代另一个重要的基础设施。云链结合,让技术助力传统产业升级,重塑信任关系。11月30...