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

Posted 2021-07-27 黑木令

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 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() 方法添加指定的属性, 并为其赋指定的值 。
}

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