webkit内核浏览器初始化样式
总结、技术 Feb 13, 2015
我们经常会碰到在webkit内核浏览器中,显示input标签、button按钮等元素的样式比较怪异。这是因为在webkit内核浏览器中,对这些元素设置了默认的初始化样式。那我们如何进行重置样式呢?这里给一份初始化css的样式,供大家参考。
样式的初始化
/* -------------@ reset css------------ */
* {
/*清除浏览器的高亮背景*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent; /*For some Androids*/
}
html, body {
width:100%;
}
body {
-webkit-text-size-adjust:none;/*支持设置小于12px的字体*/
-webkit-touch-callout:none;/*禁用ios系统长按弹出默认菜单*/
-webkit-user-select:none;/*禁止用户长按选择文本*/
}
body, h1, h2, h3, h4, h5, hr, p, blockquote, nav, header, section,footer,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
margin:0;
padding:0;
}
ul, ol, li {
list-style:none;
}
button, input, input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance:none;
}
button, input, select, textarea {
vertical-align:middle;
outline:none;
border:none;
}
textarea {
resize:none;
font-family:inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
a {
text-decoration:none;
outline:none;
}
img {
vertical-align:niddle;
border:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
ins {
text-decoration:none;
}
i {
font-style:normal;
}
/*-----------------@ global HTML Element style-------------------*/
body {
font-family: "PingFang Medium","PingFang SC","Source Han Sans";
font-size: 16px;
font-weight: normal;
line-height: 1.2em;
}