常见的浏览器兼容问题: html 方面

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家, 不仅仅是 CSS; 这个专题就是 HTML 相关的内容; 不积跬步，无以至千里, 一时得失莫要在意。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素, 从而导致不能解析。这点主要体现在 html5 的新标签上

1. 解决办法是: htmlshim / html5shiv.js 框架可以让低于 IE9 的浏览器支持 html5

2. img 的 alt 属性, 在图片不存在的情况下, 各浏览器的解析不一致

1. 在 chrome 下显示的是一张破损的图片2. 在 ff 下显示的是 alt 的文字3. 而在 IE 中显示的是破损的图片加文字

3. ul 标签内外边距问题

1. ul 标签在 IE6\IE7 中, 有个默认的 外边距, 但是在 IE8 以上及其他浏览器中有个默认的 内边距

4. 完美解决 Placeholder

   1. <input type="text" value="Name"  onFocus="this.value = '';"  onBlur="if (this.value == '') {this.value = 'Name';}" />

// 关于图片无法正常加载, JS 的解决办法 (需要将处理函数定义在 head 中, 防止图片加载出错时, 没有读取到处理函数):
// 方法一: (如果 img 标签是少量的话, 可以用这个)
<img src='test.jpg' alt='test' onerror="this.src='default.jpg'"></img>// 方法二:
$(function(){// 注意: 在页面加载的时候添加, 并且添加完成后清空 onerror, 否则会一直循环请求.// 注册加载失败事件, 再次加载时先重新设置 url, 再清空原先的注册加载失败事件$("img").attr("onerror","this.src='img/error.jpg; this.οnerrοr=null;'");//遍历 img 标签, 再次重新加载$("img").each(function(){this.src = this.src;});
});// 方法三: (JS 原生方法)
<img src="someimage.png" onerror="imgError(this);" />
function imgError(image){// 隐藏图片//  image.style.display = 'none';// 替换为默认图片document.getElementById("img").setAttribute("src", "images/demo.png"); // setAttribute() 方法添加指定的属性, 并为其赋指定的值 。
}

如果对你有所帮助，希望大家喜欢点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

常见的浏览器兼容问题: html 方面相关推荐

常见的浏览器兼容问题
来源于: http://developer.51cto.com/art/201008/218335.htm 浏览器兼容问题一:不同浏览器的标签默认的外边距和内边距不同问题症状:随便写几个标签,不加样 ...
CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总一.从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...
常见前端浏览器兼容问题及解决方案
常见前端浏览器兼容问题及解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站 ...
常见的浏览器兼容问题及解决方案
1 浏览器内核不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异. 常见的浏览器内核: 浏览器名称内核 IE Trident内核,也称IE内核 Chrome(谷歌) 以前是Web ...
前端常见的浏览器兼容问题
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异. 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎所以浏览器兼容性问题一般指:css兼容.js兼容一.样式初始化由于各 ...
WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
为什么会有兼容问题? 由于浏览器种类众多,不同的浏览器其内核亦不尽相同,故各个浏览器对网页的解析有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览 ...
常见的浏览器兼容性问题大汇总
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
金三银四，那浏览器兼容你知多少？
为什么会存在浏览器兼容问题? 首先要了解兼容,我们先得了解一下为什么会存在浏览器兼容问题.在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. 浏览器 ...
浏览器兼容问题（实战干货）
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...

常见的浏览器兼容问题: html 方面

1. 最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素, 从而导致不能解析。这点主要体现在 html5 的新标签上

2. img 的 alt 属性, 在图片不存在的情况下, 各浏览器的解析不一致

3. ul 标签内外边距问题

4. 完美解决 Placeholder

常见的浏览器兼容问题: html 方面相关推荐

最新文章

热门文章

常见的浏览器兼容问题: html 方面

1. 最突出也是最容易想到的就是 高版本的浏览器用了 低版本的浏览器 无法识别的元素, 从而导致不能解析 。 这点主要体现在 html5 的新标签上

2. img 的 alt 属性, 在图片不存在的情况下, 各浏览器的解析不一致

3. ul 标签 内外边距 问题

4. 完美解决 Placeholder

常见的浏览器兼容问题: html 方面相关推荐

最新文章

热门文章

1. 最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素, 从而导致不能解析。这点主要体现在 html5 的新标签上

3. ul 标签内外边距问题