css - RESET.CSS 仅在 Safari 中阻止 的样式...为什么？

Question

我正在使用 Eric Meyer 的 reset.css，如下所示:

http://cssreset.com/scripts/eric-meyer-reset-css/

由于未知原因，它阻止了我对 <em> 的定义在我的主样式表中 仅 在 Safari 中。在所有其他浏览器中，我的 <em>定义按指示工作(选择正确的字体等)

为此，我找到的唯一解决方法是从 reset.css 文件的列表中删除“em”。幸运的是，这在任何浏览器中都不会以任何方式对我的网站造成问题。它确实修复了 Safari <em>问题，因为当从 reset.css 文件中删除“em”时，<em>文本在 Safari 中正确呈现。

有没有其他人在使用 Safari 时遇到过这种情况，有人能提出比简单地从 reset.css 中删除“em”更好的补救措施吗？

测试源代码

这里是一个文件的文本，它调用了三个 CSS 文件。在除 Safari 之外的所有浏览器中，文本都以正确的字体定义显示。只有当 em RESET.CSS 文件中的定义被删除，将在 Safari 上呈现斜体。为什么？

[index.php]

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="site.css" />
<p>This should be Muli Roman</p>
<p><em>This should be Muli Italics</em></p>
<p><strong>This should be Open Sans Bold</strong></p>
<p><em><strong>This should be Open Sans Italics</strong></em></p>

[重置.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,
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{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

[字体.css]

@font-face{font-family:'Roman';font-weight:400;font-style:normal;src:url('http://fonts.gstatic.com/s/muli/v7/BkuZCUxEYxRfSu-XBj9_CA.eot');src:url('http://fonts.gstatic.com/s/muli/v7/BkuZCUxEYxRfSu-XBj9_CA.eot?#iefix') format('embedded-opentype'),
local('Muli'),
local('Muli-regular'),
url('http://fonts.gstatic.com/s/muli/v7/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/muli/v7/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff') format('woff'),
url('http://fonts.gstatic.com/s/muli/v7/BfQP1MR3mJNaumtWa4Tizg.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=5laWPvb-IgmGJk9r92y1Hw#Muli') format('svg');}
@font-face{font-family:'Italic';font-weight:400;font-style:italic;src:url('http://fonts.gstatic.com/s/muli/v7/vurWTAYiHMPVScIey50dUQ.eot');src:url('http://fonts.gstatic.com/s/muli/v7/vurWTAYiHMPVScIey50dUQ.eot?#iefix') format('embedded-opentype'),
local('Muli Italic'),
local('Muli-italic'),
url('http://fonts.gstatic.com/s/muli/v7/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/muli/v7/DSOyST5zmfghBgRIogdupevvDin1pK8aKteLpeZ5c0A.woff') format('woff'),
url('http://fonts.gstatic.com/s/muli/v7/AQQ1r0_czneVCtTD9ckSEA.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=Ok1ULmeTg1kfss3jIu3xZQ&skey=f22af9a5d2e9fc47#Muli') format('svg');}
@font-face{font-family:'Bold';font-weight:600;font-style:normal;src:url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot');src:url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#iefix') format('embedded-opentype'),
local('Open Sans Semibold'),
local('Open-Sans-600'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff') format('woff'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=MTP_ySUJH_bn48VBG8sNSllIn5tFQcqMuf-jhyJP0ps#OpenSans') format('svg');}
@font-face{font-family:'BoldItalic';font-weight:600;font-style:italic;src:url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot');src:url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot?#iefix') format('embedded-opentype'),
local('Open Sans Semibold Italic'),
local('Open-Sans-600italic'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxsiAiQ_a33snTsJhwZvMEaI.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxuw_rQOTGi-AJs5XCWaKIhU.woff') format('woff'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=PRmiXeptR36kaC0GEAetxuVmfClkf66xvxL1SWm4y8M#OpenSans') format('svg');}

[站点.css]

p {line-height:1.875;padding:0 0 0.75em 0;}
body, .roman{font-family:'Roman', Arial, sans-serif;}
em, i, .italics{font-family:'Italic', Arial, sans-serif;}
strong, b, .bold {font-family:'Bold', Arial, sans-serif;}
em strong, strong em, ib, bi, .italics .bold, .bold .italics {font-family:'BoldItalic', Arial, sans-serif;}

Answer 1

我可以重现这个问题，最简单的补救方法是在 site.css 中显式定义 font-style 属性:

p {line-height:1.875;padding:0 0 0.75em 0;}
body, .roman{font-family:'Roman', Arial, sans-serif;}
em, i, .italics {
  font-family:'Italic', Arial, sans-serif;
  font-style:italic; /* added */
}
strong, b, .bold {font-family:'Bold', Arial, sans-serif;}
em strong, strong em, ib, bi, .italics .bold, .bold .italics {font-family:'BoldItalic', Arial, sans-serif;}

Safari 正在读取您正在使用的 reset.css 的 font:inherit; 部分，并将其解释为浏览器原生 font- 的覆盖style:italic; em 元素的定义，最终计算值为 font-style:normal;。

要纠正此问题，必须在 reset.css 或他们的 site.css 文件中重新包含 font-style。不过，我不确定这是否是 Safari 的 WebKit 实现中的错误。看来 Chrome 也在计算最终输出为 font-style:normal，这让我想知道为什么他们的呈现为斜体。