admin管理员组文章数量:1567837
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 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 方面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726723709a1082027.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论