兼容问题和解决办法

 一、移动端兼容问题和解决办法

参考地址：移动端的兼容问题_移动端兼容问题-优快云博客

二、PC端兼容问题和解决办法

1.如果图片加a标签在IE9-中会有边框

解决方案：

img { border: none; }

2.rgba不支持IE8

 解决方案: 可以用 opacity或老式的filter配合alpha和opacity

background-color: rgba(128, 128, 128, 0.5); /* 使用 RGBA 表示半透明的灰色(不被支持) */

opacity: 0.7; /* Firefox chrome safari opera (现代浏览器的使用方式) */ 
filter: alpha(opacity: 70); /* 用了ie滤镜,可以兼容ie(IE8及以下支持) */

3.display: inline-block ie6/7不支持

解决方案：

display: inline-block;
*display: inline; // 可以强制将该元素作为内联元素显示，从而模拟实现 inline-block 的效果

 4.默认的body没有去掉margin情况下，ie5、6、7边缘会很宽，margin-top加倍。

解决方案: 用css给body添加magin属性为0px

body { margin: 0; }

5.IE 6.0 Firefox Opera 等的 真实宽度 = width + padding + border

　IE5.X 真实宽度 = width

　解决方案:

方案1

div.content { 
　　width: 400px;  // 这个对于ie5来说是正确的
　　voice-family: "\"}\"";  // IE5.X/win忽略了"\"}\""后的内容 
　　voice-family: inherit; 
　　width: 300px;  // 包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉旧的 
}　

方案2

div.content {
    // 这个是正确的width，大部分支持!important标记的浏览器使用这里的数值  
　　width:300px !important;
    // IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，
    // 新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
    width(空格)/**/:400px;  
}

6.height最好不能小于16px。如果设置较小高度标签（一般小于10px），在IE6，IE7，遨游中的高度可能会超出自己设置的较小高度。

解决方案: overflow 设置为 hidden

7.min-height 不兼容。ie6 7浏览器版本中，如果内容超过了设定的最小高度，它们会自动扩展以适应内容高度，因此可能会导致布局上的问题。而在其他浏览器版本中，如果内容超出最小高度，浏览器通常会遮盖底部的元素而不会自动扩展自身高度。

解决方案:

1. 使用JavaScript兼容解决方案：通过 JavaScript 检测浏览器版本，在 IE6 和 IE7 中使用 JavaScript 动态计算元素高度，以实现最小高度的效果。

2. 使用IE条件注释：针对 IE6 和 IE7 特定版本，在 CSS 文件中使用 IE 条件注释，提供专门针对这些浏览器的样式设置，避免不兼容问题。

3. 换用其他属性替代：在一些情况下，可以考虑使用其他 CSS 属性或技巧来模拟 min-height 的效果，如使用 padding 或伪元素等方法来实现类似的布局需求。

4. 弹性布局（Flexbox）：如果项目允许，可以考虑使用 Flexbox 布局来更灵活地控制元素的尺寸，而不依赖于 min-height。

5. CSS Hack：针对特定版本的 IE6 和 IE7 可以使用 CSS Hack 手段，通过针对性的 CSS 代码来解决 min-height 兼容性问题。例如：_height: 200px; 这种方式来单独为 IE6 设置高度。

 8.position:fixed  IE5、6无法识别此属性

1. JavaScript 兼容方案：通过 JavaScript 来模拟 position: fixed; 的效果。可以在页面加载时通过 JavaScript 计算滚动条的位置，并动态改变元素的定位属性来实现固定定位的效果。

2. 使用IE Hack：针对特定版本的 IE 浏览器，可以使用专门针对这些版本的 CSS Hack 技巧来实现类似的效果。例如，为 IE5 和 IE6 单独设置一个备用样式，将其定位属性设置为 absolute 并随着滚动条位置的变化动态调整元素的位置。

3. jQuery 插件：使用一些 jQuery 插件来解决 position: fixed; 在旧版本 IE 中的兼容性问题。这些插件通常会通过 JavaScript 实现类似的效果，并能够很好地处理不同浏览器的差异。

4. 使用其他定位方式：考虑使用其他定位方式来代替 position: fixed;，如相对定位（position: relative;）结合页面滚动事件来实现类似的效果，虽然不能完全模拟 position: fixed;，但可以在一定程度上达到固定定位的效果。

 9.浮动的div有margin_left属性，ie6会加倍 ，无论兼容视图还是无声明视图（兼容视图和无声明视图则是为了兼容旧版本的网站和文档而存在的渲染模式；标准视图是推荐的浏览器渲染模式，可以确保页面的一致性和遵循最新的Web标准。）

解决方案:

方案1

利用IE6唯一识别属性_的方式加_display属性_display: inline;

方案2

// 条件注释
<!--[if lte IE 6]>
    <style>
　　    .on{ display: inline }
    </style>
<![endif]-->

10.cursor兼容，自定义指针cur格式的图片url路径问题，无论是兼容还是无声明版本

解决方案：

cursor: url(Hand.cur), url(/Hand.cur), auto;

11.png图片，IE6里面的png图片不能透明，兼容版本和无声明版本都是

解决方案：

<!--[if IE ]>
<style type="text/css">
#DIVname{
    background:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png");
}
</style>
<![endif]-->

12.img浮动，img标签打回车会造成每个图片之间有缝隙

解决方案：可以删除img之间的回车键

13.在IE浏览器下 input type="text" 文本框点击时后面会出现"X",以及 type="password" 后面会出现眼睛,如何除去这两种默认样式

解决方案：

::-ms-clear, ::-ms-reveal { display: none; } // (IE 10及更高版本)

14.CSS3前缀

 -webkit-  webkit渲染引擎  chrome/safa

-moz-   gecko渲染引擎   firefox

-ms-    trident渲染引擎  IE

-o-  　opeck渲染引擎　opera　　　　

动画、过渡、background-size 都需要加前缀

eg: 动画

 @-webkit-keyframes name {
　    0%{ 动画开始的css样式; }
　    100%{ 动画结束的css样式; }
　}
-webkit-animation: name 8s infinite linear;

 过渡:

 div.box {
    bottom:-40px;
    -webkit-transition:all .3s ease-in-out 0s;
}

注: 过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8，可以考虑用img

15.渐变

解决方案：

background: #35FEA1; /* 默认值 */
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorStr='#35FEA1',endColorStr='#6E9DFF'); /* IE 6-9 */
background: -ms-linear-gradient(top, #35FEA1, #6E9DFF); /* IE 10 */
background: -moz-linear-gradient(top, #35FEA1, #6E9DFF); /* 火狐 */
background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(top, #35FEA1, #6E9DFF); /* Opera 11.10 */

 16.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

要使用 PIE.htc 文件，需要在 CSS 样式表中引入。

(1) 圆角 border-radius

.signBtn {
    height: 40px;
    background-color:#08BCD2;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(css/PIE.htc);
}

(2)阴影 box-shadow 

.box {
　　width:200px;
　　height:200px;
　　-webkit-box-shadow:1px 0 10px;
　　-moz-box-shadow:1px 0 10px;
　　box-shadow: 1px 0 10px;
　　background-color: #fff;
　　behavior: url(css/PIE.htc); /*IE边框阴影*/
}

 (3)背景透明rgba

.box {
　　background-color:rgba(12, 154, 171, 0.29);
    behavior: url(css/PIE.htc);
    -pie-background:rgba(12, 154, 171, 0.29);
}

 (4)渐变

.box {
   width:200px;
   height:400px;
   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
   background:-moz-linear-gradient(#9F9, #393);
   -pie-background:linear-gradient(#9F9, #393);
   behavior:url(pie.htc);                
}

注: PIE.htc文件路径是相对于css文件，并非html文件，以上例子是将PIE.htc文件放在与css样式文件的同一个文件夹内，而对应的html文件与css文件夹同级。

17.JS实现点击跳转到指定位置

$(".arrow-bt").click(function() {
    var scroll_offset = $("#section").offset();
    console.log(scroll_offset);
    
    $('body,html').animate({
        scrollTop: scroll_offset.top
    }, 0); // 在这里设置动画时间为0，可以立即跳转到指定位置，不会有过渡效果
});

三、常用的跨浏览器测试工具

可以帮助开发人员模拟各种操作系统、浏览器和设备的环境，以查看页面在不同平台上的效果。

1. BrowserStack：BrowserStack 是一个支持跨浏览器测试的工具，它可以帮助开发人员在不同的浏览器和设备上进行网站和应用程序的测试。

2. CrossBrowserTesting：CrossBrowserTesting 是另一个流行的跨浏览器测试工具，提供了在不同浏览器、操作系统和设备上执行自动化和手动测试的功能。

3. Sauce Labs：Sauce Labs 提供了基于云的跨浏览器测试服务，支持在各种平台、浏览器和设备上进行自动化和手动测试。

4. LambdaTest：LambdaTest 是一个提供跨浏览器测试的云端平台，支持在多种浏览器和操作系统上运行自动化和手动测试。

5. Browserling：Browserling 提供了简单易用的在线跨浏览器测试工具，允许开发人员快速在各种浏览器中查看其网站或应用程序的表现。