网页设计中的浏览器兼容性问题

Posted 2021-04-30 自学web网页前端

   IE:trident内核
   Firefox：gecko内核
   safari：webkit内核
   opera：以前是presto内核，
   现在改用google chrome的Blink内核
   Chrome：Blink（基于webkit）
   因为不同浏览器使用内核及所支持的html,
   以及用户客户端的环境不同(如分辨率不同)
   造成的显示效果不能达到理想效果。
    最常见的问题就是网页元素位置混乱，错位。
   1.不同浏览器的默认样式存在差异，
   可以使用 Normalize.css 抹平这些差异。
   当然，也可以定制属于自己业务的 reset.css
    简单粗暴法
   * { margin: 0; padding: 0; }
   2.浏览器 CSS 兼容前缀
-moz-   /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-/* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-     /* Opera浏览器(早期) */
-ms-    /* Internet Explorer (不一定) */
   3.a 标签的几种 CSS 状态的顺序
    在写 a 标签的样式时，写的样式会没有效果，
    或者点击超链接后,hover、active 样式没有效果，
    其实只是写的样式被覆盖了。
    正确的a标签顺序应该是：
   link:平常的状态
   visited:被访问过之后
   hover:鼠标放到链接上的时候
   active:链接被按下的时候
   4.BFC 解决边距重叠问题
    BFC即块格式化上下文。
    当相邻元素都设置了 margin 边距时，
    margin 将取最大值，舍弃小值。
    为了不让边距重叠，可以给子元素加一个父元素，
    并设置该父元素为 BFC：overflow: hidden;
    5.IE6 双倍边距的问题
    设置 ie6 中设置浮动，同时又设置 margin，
    会出现双倍边距的问题
   6.解决 IE6 不支持 min-height 属性的问题
    min-height: 100px;
   _height: 100px;
   7.IE6 背景闪烁的问题
   链接、按钮用 CSSsprites 作为背景，
    在 ie6 下会有背景图闪烁的现象。
    原因是 IE6 没有将背景图缓存，
    每次触发 hover 的时候都会重新加载
    document.execCommand("BackgroundImageCache"
    , false, true);
   8.解决 ie9 以下浏览器对 html5 新增标签不识别。
     使用html5shiv.min.js

9.窗口大小的兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）

var client_w = document.documentElement.clientWidth || document.body.clientWidth;

var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）

var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;

var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）

var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;

var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度

var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

   10.解决IE9 以下浏览器不能使用 opacity

    opacity: 0.5;

filter: alpha(opacity = 50);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);