移动端css样式Reset初始化_移动端css reset-CSDN博客

本文链接：https://blog.csdn.net/qq_19249021/article/details/117414937

这篇博客记录了一种实用的reset.css文件，旨在消除移动端页面在不同浏览器间的样式差异。通过重置HTML、body及各种元素的默认样式，确保布局的一致性和响应性。同时，文中还涉及了如何处理链接的高亮、输入框的样式以及隐藏iPhone和iPad上的默认按钮样式。这是一份对于前端开发者构建流畅移动端体验必不可少的参考资料。

摘要由CSDN通过智能技术生成

经常会写移动端页面，所以需要用到css reset。在此特别记录一个reset.css文件。非常好用

	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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

html {
    font-size: 12px;
    color: #666;
    font-family: Microsoft Yahei,Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
}

body {
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

img {
    border: none;
    vertical-align: middle;
}

a {
    text-decoration: none;
    outline: none;
    /*设置的tap  A标签的时候出现的黑色高亮*/
    -webkit-tap-highlight-color: transparent;
}

a:active {
    outline: 0;
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

em {
    font-style: normal;
}

input {
    outline: none;
}

input[type="text"],
input[type="tel"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 去除iphone ipad 设备默认按钮样式 */
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    border-radius: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #cccccc;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #cccccc;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #cccccc;
}