css 去除苹果默认样式
更新时间：2023-11-27
**前言：**
要去除苹果浏览器的默认样式，我们需要重置或覆盖默认的CSS样式。苹果浏览器（如Safari）在渲染页面时会添加一些自带的样式，这可能会导致页面在不同浏览器之间显示不一致。以下是一些方法可以帮助我们去除苹果浏览器的默认样式。
**第一段：使用CSS Reset**
要去除苹果浏览器的默认样式，一种常见的方法是使用CSS Reset。CSS Reset是一段预置的CSS代码，会将所有元素的默认样式都重置为一致的状态，消除浏览器之间的差异。具体步骤如下：
```html
<!DOCTYPE html>
<html>
<head>
<style>
body, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
</style>
</head>
<body>
<h4>样式重置已添加</h4>
<p>开始编写您的页面内容。</p>
</body>
</html>
```
上述代码中，我们将大部分HTML元素的默认样式重置为0，并将列表样式和引用样式设为无。
**第二段：覆盖默认样式**
苹果浏览器有一些特定的默认样式，我们可以使用CSS覆盖这些样式。下面是一些常见的覆盖样式的示例：
```html
body, p, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: none;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input, textarea {
-webkit-appearance: none;
}
```
上面的代码示例中，我们通过修改`-webkit-text-size-adjust`属性来控制文字的缩放行为，通过`-webkit-tap-highlight-color`属性来取消链接点击时的高亮效果，通过`-webkit-appearance`属性来去除表单元素的默认外观。
**第三段：使用Normalize.css**
除了手动编写CSS Reset和样式覆盖外，还可以使用开源的Normalize.css来帮助去除苹果浏览器的默认样式。Normalize.css是一个轻量级的CSS重置库，它会将所有浏览器的样式默认化，从而提供一致的样式表现。
您可以在项目中引入Normalize.css文件，并将其作为第一个样式表来使用，如下所示：
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<style>
/* 自定义样式 */
</style>
</head>
<body>
<h4>样式已经重置和默认化</h4>
<p>继续编写您的内容。</p>
</body>
</html>
```
**总结：**
通过使用CSS Reset、覆盖默认样式或引入Normalize.css，我们可以有效地去除苹果浏览器的默认样式，从而确保页面在不同浏览器之间的一致性。选择使用哪种方法取决于您的具体需求和项目要求，但无论哪种方法，都可以帮助您更好地控制和定制页面样式。只需根据项目需要选择适合的方式来去除苹果浏览器的默认样式，提升用户体验。 
