CSS中兼容性问题

最新推荐文章于 2024-03-30 21:23:47 发布

前端初见

最新推荐文章于 2024-03-30 21:23:47 发布

阅读量10w+

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/stc_ljc/article/details/129868158

版权

文章目录

前言
总结

前言

这篇文章主要和大家聊一下在CSS中兼容性问题，兼容性问题主要存在于ie和其他游览器之间的一个问题，因为他们内核不一样，在解析css的时候解析方式也不一样，css兼容性的问题其实有很多
在这里插入图片描述

一、常见的兼容性问题：

在前端开发中，浏览器兼容性问题是一个经常遇到的问题，这些问题可能会导致页面显示效果不一致，甚至会影响网站的正常使用。以下是一些处理浏览器兼容性问题的思路和方法：

1.去掉ios输入框，下拉框，输入域点击阴影问题

元素内添加：

 -webkit-tap-highlight-color:transparent;

2.解决手机端滚动条卡顿

在父元素的css中添加

.main{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

3.图片加a标签在IE游览器会有边框问题

img{border: none;}

4.a标签蓝色边框问题

a{outline: none;}

5.解决IE游览器不支持min-height属性

{min-height: 200px; _height: 350px;}

6.cursor鼠标移入小手兼容问题

{cursor: pointer;}

7.a标签css状态的顺序问题

顺序=>link--visited--hover--active

8.img标签在IE游览器下面空隙问题

img{display: block;}

9.li中内容超过长度时，超出部分用省略号显示

li{
    width:100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

10.div标签嵌套p标签时，出现空白行问题

li{display: inline;}

11.设置较小高度标签（一般小于10px），在IE游览器中高度超出自己设置高度。

给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

12.解决不同浏览器的标签默认的内外边距不同

*{margin: 0; padding: 0;}

13.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

-webkit-text-size-adjust: none;

14.清除游览器默认样式代码

/**
 * 清除浏览器样式
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    padding:0;
    margin:0;
    border:0;
    outline: 0;
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-wrap:break-word;
}
html, body {
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
    list-style-type: none;
}
textarea {
    resize: none;
}
/*去除input button默认样式*/
input, button, textarea {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
    padding: 0;
    border: 0;
    outline: 0;
}
// 修改placeholder属性默认文字颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
}

二、浏览器私有属性：

浏览器私有属性指的是CSS属性或规则，其前面带有浏览器生产商的私有前缀，例如-webkit-，-moz-，-ms-，-o-，-khtml-等。这些前缀暗示该CSS属性或规则尚未成为W3C标准的一部分。当浏览器厂商开发出新的CSS特性时，他们会先在自己的浏览器上实现，但是这些特性可能不被其他浏览器所支持，所以为了避免冲突，浏览器厂商会在其前面加上浏览器私有前缀。