Question

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

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

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

我发现的唯一解决方法是从reset.css文件的列表中删除“em”。幸运的是，这对我的网站在任何浏览器中都没有任何问题。它解决了Safari <em>问题，因为当从reset.css文件中删除“em”时，会在Safari中正确呈现<em>文本。

有没有其他人在使用Safari时遇到过这种情况，并且任何人都可以提出补救措施，而不仅仅是从reset.css中移除“em”吗？

用于测试的源代码

以下是调用三个CSS文件的文件的文本。在除Safari之外的所有浏览器中，文本显示正确的字体定义。仅当RESET.CSS文件中的em定义被删除时，才会在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>

[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,
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;}

[fonts.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');}

[的site.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

我可以复制问题，解决问题的最简单方法是在font-style中明确定义site.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;
  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正在阅读您正在使用的font:inherit;的{{1}}部分，并将其解释为对reset.css元素的浏览器本地font-style:italic;定义的覆盖计算值em。

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

RESET.CSS仅阻止Safari中<em>的样式...为什么？

1 个答案: