前端PC端兼容性问题

Myth丶恋晨 2022-04-10 10:37 320阅读 0赞

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

解决办法：

img{
    
        border:none;
    
    }

2.rgba不支持IE8-->使用opacity

opacity:0.7;/* ff chrome safari opera*/
    
    filter"alpha(opacity:70)/*兼容ie*/

3.ie6,ie7不支持display:inline-block;

display:inline-block;
    
    *display:inline;

;

4.默认的body是没有去掉margin的，所以在这种情况下,所有的ie浏览器的margin-top就会加倍。所以要给body加上

body{
    
        margin:0px;
    
    }

5.position:fixed ie5、6无法识别

6.浮动的div有margi-left属性的话ie6会加倍，无论兼容视图还是无声明视图。

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

方案二:条件注释

<!--\[if lte IE 6\]>

<style>

.on\{ display:inline \}

</style>

<!\[endif\]-->

插播一条

判断ie版本（要在html里面）

除IE外都可识别

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

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

8、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\]-->

9.img浮动

img标签如果后面有一个回车会导致图片之间有缝隙

解决办法：删除回车键

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

::-ms-clear,::-ms-reveal\{display:none;\}

11.CSS3前缀  -webkit-  webkit渲染引擎  chrome/safari

-moz-   gecko渲染引擎   firefox

-ms-    trident渲染引擎  IE

-o-  　opeck渲染引擎　opera

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

12.渐变

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=\#35FEA1,endColorStr=\#6E9DFF); /\*IE 6 7 8\*/

background: -ms-linear-gradient(top, \#35FEA1,  \#6E9DFF);/\* IE 10 \*/

background:-moz-linear-gradient(top, \#35FEA1,  \#6E9DFF); /\*火狐\*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(\#35FEA1), to(\#6E9DFF));/\*谷歌\*/

background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(\#35FEA1), to(\#6E9DFF));/\* Safari 4-5, Chrome 1-9\*/

background: -webkit-linear-gradient(top, \#35FEA1,  \#6E9DFF);/\*Safari5.1 Chrome 10+\*/

.圆角矩形

\-webkit-border-radius: 3px;

-moz-border-radius: 3px;

阴影

-webkit-box-shadow:1px 0 10px;

-moz-box-shadow:1px 0 10px;

box-shadow: 1px 0 10px;

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端开发兼容性问题汇总

*最新更新时间：2019年09月07日13:27:20* [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：移动端开发兼容性问题...

冷不防/ 2024年04月18日 13:30/ 0 赞/ 101 阅读

相关前端浏览器兼容性问题解决

前端浏览器兼容问题总结前端解决不同浏览器及不同版本的兼容性问题浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样

雨点打透心脏的1/2处/ 2023年06月27日 15:59/ 0 赞/ 34 阅读

相关移动端兼容性问题

1、iOS10.2.1系统中，屏幕滚动的时候，元素的fixed定位会失效；解决方案：给要滚动的元素加上以下样式 .content｛ height

灰太狼/ 2023年06月20日 06:28/ 0 赞/ 31 阅读

相关前端兼容性

前端兼容性：所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们

「爱情、让人受尽委屈。」/ 2023年03月01日 13:52/ 0 赞/ 28 阅读

相关前端常见浏览器兼容性问题解决方案

前言： > 不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 > 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 > 所以浏览器兼容

客官°小女子只卖身不卖艺/ 2022年12月16日 13:03/ 0 赞/ 254 阅读

相关移动端兼容性问题解决方案

移动端兼容性问题解决方案参考文章： [（1）移动端兼容性问题解决方案][1] （2）https://www.cnblogs.com/biglion/p/5985546.

川长思鸟来/ 2022年08月28日 04:53/ 0 赞/ 291 阅读

相关 WEB前端开发-移动端兼容性问题汇总

最近更新时间：2018年4月9日16:50:05 [《我的博客地图》][Link 1] 作为一名专业的web前端开发工程师，必须时刻谨记自己的使命和价值，能够

短命女/ 2022年05月27日 01:49/ 0 赞/ 322 阅读

相关前端PC端兼容性问题

1.如果图片加a标签在IE9中会有边框。解决办法： img{ border:none; } 2.rgba

Myth丶恋晨/ 2022年04月10日 10:37/ 0 赞/ 321 阅读

相关移动端兼容性问题记录

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 移动端兼容性问题记录 1. IOS12上并且使用

矫情吗；*/ 2022年01月14日 03:07/ 0 赞/ 300 阅读

相关 pc如何与手机端兼容

<meta name="viewport" content="width=device-width, initial-scale=1.0

骑猪看日落/ 2021年07月25日 01:32/ 0 赞/ 442 阅读