文章目录
- 前言
- 一、常见的兼容性问题:
- 1.去掉ios输入框,下拉框,输入域点击阴影问题
- 2.解决手机端滚动条卡顿
- 3.图片加a标签在IE游览器会有边框问题
- 4.a标签蓝色边框问题
- 5.解决IE游览器不支持min-height属性
- 6.cursor鼠标移入小手兼容问题
- 7.a标签css状态的顺序问题
- 8.img标签在IE游览器下面空隙问题
- 9.li中内容超过长度时,超出部分用省略号显示
- 10.div标签嵌套p标签时,出现空白行问题
- 11.设置较小高度标签(一般小于10px),在IE游览器中高度超出自己设置高度。
- 12.解决不同浏览器的标签默认的内外边距不同
- 13.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
- 14.清除游览器默认样式代码
- 二、浏览器私有属性:
- 总结
前言
这篇文章主要和大家聊一下在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特性时,他们会先在自己的浏览器上实现,但是这些特性可能不被其他浏览器所支持,所以为了避免冲突,浏览器厂商会在其前面加上浏览器私有前缀。
- -webkit-:Chrome,Safari,新版Opera浏览器
- -moz-:Firefox浏览器
- -ms-:Internet Explorer浏览器
- -o-:旧版Opera浏览器
- -khtml-:Konqueror浏览器
总结
如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见。