这是渲染 CSS 时的 Chrome 问题吗？
Is this a Chrome issue at rendering CSS?
这就是 Chrome 渲染的方式 this page:
字号整体设置为100%table。
这里是 Firefox Developer Edition 中的呈现
.client-nojs #ca-ve-edit,.client-nojs .mw-editsection-divider,.client-nojs .mw-editsection-visualeditor,.ve-not-available #ca-ve-edit,.ve-not-available .mw-editsection-divider,.ve-not-available .mw-editsection-visualeditor {
display: none
}
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
margin-right: 0.25em;
color: #54595d
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
margin-left: 0.25em;
color: #54595d
}
body {
margin: 0
}
main {
display: block
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help
}
@supports (text-decoration: underline dotted) {
abbr[title] {
border-bottom:0;
text-decoration: underline dotted
}
}
pre,code,tt,kbd,samp {
font-family: monospace,monospace
}
sub,sup {
line-height: 1
}
img {
border: 0
}
button,input,optgroup,select,textarea {
margin: 0
}
button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0
}
legend {
color: inherit;
padding: 0
}
.messagebox,.errorbox,.warningbox,.successbox {
color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 16px;
border: 1px solid;
padding: 12px 24px;
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden
}
.messagebox :only-child,.errorbox :only-child,.warningbox :only-child,.successbox :only-child {
margin: 0
}
.messagebox h2,.errorbox h2,.warningbox h2,.successbox h2 {
color: inherit;
display: inline;
margin: 0 0.5em 0 0;
border: 0;
font-size: 1em;
font-weight: bold
}
.messagebox .mw-logevent-loglines li,.errorbox .mw-logevent-loglines li,.warningbox .mw-logevent-loglines li,.successbox .mw-logevent-loglines li {
font-size: 90%
}
.messagebox {
background-color: #eaecf0;
border-color: #a2a9b1
}
.errorbox {
background-color: #fee7e6;
border-color: #d33
}
.warningbox {
background-color: #fef6e7;
border-color: #fc3
}
.successbox {
background-color: #d5fdf4;
border-color: #14866d
}
.toctogglecheckbox:checked ~ ul {
display: none
}
@media screen {
html,body {
height: 100%
}
:focus {
outline-color: #3366cc
}
body {
background-color: #f6f6f6;
overflow-y: scroll
}
.mw-body,.parsoid-body {
background-color: #ffffff;
color: #202122;
direction: ltr;
padding: 1em
}
#p-personal {
position: absolute;
top: 6px;
right: 0.75em;
z-index: 100
}
#p-personal ul {
padding-left: 10em
}
#p-personal li {
float: left
}
.mw-body,#mw-data-after-content {
margin-left: 10em
}
.mw-body {
margin-top: -1px;
border: 1px solid #a7d7f9;
border-right-width: 0
}
.mw-body .firstHeading {
overflow: visible
}
.mw-indicators {
z-index: 1
}
.mw-body-content {
position: relative;
z-index: 0
}
#bodyContent:after {
clear: both;
content: '';
display: block
}
.mw-parser-output:after {
content: none
}
#mw-page-base {
background-color: #fbfbfb;
background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
background-image: linear-gradient(to bottom,#ffffff 50%,#f6f6f6 100%);
background-position: bottom left;
height: 5em
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em
}
#mw-navigation h2 {
position: absolute;
top: -9999px
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%
}
#left-navigation {
float: left;
margin-left: 10em;
margin-top: 2.5em;
margin-bottom: -2.5em
}
#right-navigation {
float: right;
margin-top: 2.5em
}
#p-search {
float: left;
margin-right: 0.5em;
margin-left: 0.5em
}
#p-search form {
margin: 0.5em 0 0
}
#simpleSearch {
min-width: 5em;
width: 13.2em;
width: 20vw;
max-width: 20em
}
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0
}
#p-logo + .mw-portlet h3 {
display: none
}
}
<table class="wikitable">
<tbody><tr>
<td>1) Il Corriere della Sera pubblica l'articolo che si vede nello screenshot ("A causa dei botti di capodanno sono morti in Italia almeno 400 cani e gatti").<div class="thumb tnone"><div class="thumbinner" style="width:250px;"><a href="/wiki/File:Botti1.png" class="image"><img alt="Botti1.png" src="/images/thumb/1/1d/Botti1.png/248px-Botti1.png" decoding="async" class="thumbimage" srcset="/images/thumb/1/1d/Botti1.png/372px-Botti1.png 1.5x, /images/1/1d/Botti1.png 2x" data-file-width="375" data-file-height="398" width="248" height="263"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti1.png" class="internal" title="Ingrandisci"></a></div></div></div></div>
</td>
<td>2) Un'influencer con 4000 follower nelle sue storie esprime la sua opinione in maniera molto energica:<blockquote><p>"TESTE DI CAZZO"</p></blockquote>
</td></tr>
<tr>
<td>3) Una ragazza legge la storia dell'influencer e le scrive in privato il messaggio che segue:<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_2.png" class="image"><img alt="" src="/images/thumb/7/73/Botti_2.png/300px-Botti_2.png" decoding="async" class="thumbimage" srcset="/images/7/73/Botti_2.png 1.5x" data-file-width="362" data-file-height="465" width="300" height="385"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_2.png" class="internal" title="Ingrandisci"></a></div>Immagine 1</div></div></div>
</td>
<td>4) L'influencer, invece di rispondere in privato, pubblica una nuova storia mostrando disprezzo per l'idea della ragazza (senza farne il nome però).<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_3.png" class="image"><img alt="" src="/images/thumb/b/bf/Botti_3.png/300px-Botti_3.png" decoding="async" class="thumbimage" srcset="/images/b/bf/Botti_3.png 1.5x" data-file-width="323" data-file-height="373" width="300" height="346"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_3.png" class="internal" title="Ingrandisci"></a></div>Immagine 2</div></div></div>
</td></tr>
<tr>
<td>5) La ragazza, com'è comprensibile, <b>si offende</b> e risponde a sua volta con una sua storia, taggando l'influencer:<blockquote><p>«la stupidità la colgo nella tua persona e anche la tua cattiveria perché cerchi di mettermi alla gogna pubblica. Se non sai gestire il tuo cane non sono affari miei».</p></blockquote>Si noti che la ragazza ha preso una svista, infatti l'influencer - pur usando toni molto sopra le righe - aveva censurato il suo nome, non l'aveva esposta a pubblica gogna, tuttavia ha solo 300 follower.
</td>
<td>6) L'influencer replica in così:<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_4.png" class="image"><img alt="" src="/images/thumb/7/72/Botti_4.png/300px-Botti_4.png" decoding="async" class="thumbimage" srcset="/images/7/72/Botti_4.png 1.5x" data-file-width="410" data-file-height="456" width="300" height="334"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_4.png" class="internal" title="Ingrandisci"></a></div>Immagine 3</div></div></div>
</td></tr>
<tr>
<td>
</td>
<td>
</td></tr></tbody></table>
每个浏览器都有不同的默认值，尽管大多数都是相同的。
设计人员通常通过 normalizing/reseting 使用 Normalize Script 的默认浏览器值来解决这个问题。
您可以在 article.
中阅读更多内容
您也可以使用 YUI 中的 CSS reset。它将使您的页面在所有浏览器中更加一致，包括字体渲染。
样式分为2种：
1- default style (agent) 即浏览器默认提供的样式
2- 由开发者创建的修改样式（开发者）。
此样式可能因浏览器而异或因用户修改而异。因此，您可以重置此样式，当涉及到字体大小时，您可以将根元素中的字体大小设置为 62.5%，并使用 rem 单位来处理您的值。因为 62.5% 作为默认浏览器字体大小。
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
这就是 Chrome 渲染的方式 this page:
字号整体设置为100%table。
这里是 Firefox Developer Edition 中的呈现
.client-nojs #ca-ve-edit,.client-nojs .mw-editsection-divider,.client-nojs .mw-editsection-visualeditor,.ve-not-available #ca-ve-edit,.ve-not-available .mw-editsection-divider,.ve-not-available .mw-editsection-visualeditor {
display: none
}
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
margin-right: 0.25em;
color: #54595d
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
margin-left: 0.25em;
color: #54595d
}
body {
margin: 0
}
main {
display: block
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help
}
@supports (text-decoration: underline dotted) {
abbr[title] {
border-bottom:0;
text-decoration: underline dotted
}
}
pre,code,tt,kbd,samp {
font-family: monospace,monospace
}
sub,sup {
line-height: 1
}
img {
border: 0
}
button,input,optgroup,select,textarea {
margin: 0
}
button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0
}
legend {
color: inherit;
padding: 0
}
.messagebox,.errorbox,.warningbox,.successbox {
color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 16px;
border: 1px solid;
padding: 12px 24px;
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden
}
.messagebox :only-child,.errorbox :only-child,.warningbox :only-child,.successbox :only-child {
margin: 0
}
.messagebox h2,.errorbox h2,.warningbox h2,.successbox h2 {
color: inherit;
display: inline;
margin: 0 0.5em 0 0;
border: 0;
font-size: 1em;
font-weight: bold
}
.messagebox .mw-logevent-loglines li,.errorbox .mw-logevent-loglines li,.warningbox .mw-logevent-loglines li,.successbox .mw-logevent-loglines li {
font-size: 90%
}
.messagebox {
background-color: #eaecf0;
border-color: #a2a9b1
}
.errorbox {
background-color: #fee7e6;
border-color: #d33
}
.warningbox {
background-color: #fef6e7;
border-color: #fc3
}
.successbox {
background-color: #d5fdf4;
border-color: #14866d
}
.toctogglecheckbox:checked ~ ul {
display: none
}
@media screen {
html,body {
height: 100%
}
:focus {
outline-color: #3366cc
}
body {
background-color: #f6f6f6;
overflow-y: scroll
}
.mw-body,.parsoid-body {
background-color: #ffffff;
color: #202122;
direction: ltr;
padding: 1em
}
#p-personal {
position: absolute;
top: 6px;
right: 0.75em;
z-index: 100
}
#p-personal ul {
padding-left: 10em
}
#p-personal li {
float: left
}
.mw-body,#mw-data-after-content {
margin-left: 10em
}
.mw-body {
margin-top: -1px;
border: 1px solid #a7d7f9;
border-right-width: 0
}
.mw-body .firstHeading {
overflow: visible
}
.mw-indicators {
z-index: 1
}
.mw-body-content {
position: relative;
z-index: 0
}
#bodyContent:after {
clear: both;
content: '';
display: block
}
.mw-parser-output:after {
content: none
}
#mw-page-base {
background-color: #fbfbfb;
background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
background-image: linear-gradient(to bottom,#ffffff 50%,#f6f6f6 100%);
background-position: bottom left;
height: 5em
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em
}
#mw-navigation h2 {
position: absolute;
top: -9999px
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%
}
#left-navigation {
float: left;
margin-left: 10em;
margin-top: 2.5em;
margin-bottom: -2.5em
}
#right-navigation {
float: right;
margin-top: 2.5em
}
#p-search {
float: left;
margin-right: 0.5em;
margin-left: 0.5em
}
#p-search form {
margin: 0.5em 0 0
}
#simpleSearch {
min-width: 5em;
width: 13.2em;
width: 20vw;
max-width: 20em
}
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0
}
#p-logo + .mw-portlet h3 {
display: none
}
}
<table class="wikitable">
<tbody><tr>
<td>1) Il Corriere della Sera pubblica l'articolo che si vede nello screenshot ("A causa dei botti di capodanno sono morti in Italia almeno 400 cani e gatti").<div class="thumb tnone"><div class="thumbinner" style="width:250px;"><a href="/wiki/File:Botti1.png" class="image"><img alt="Botti1.png" src="/images/thumb/1/1d/Botti1.png/248px-Botti1.png" decoding="async" class="thumbimage" srcset="/images/thumb/1/1d/Botti1.png/372px-Botti1.png 1.5x, /images/1/1d/Botti1.png 2x" data-file-width="375" data-file-height="398" width="248" height="263"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti1.png" class="internal" title="Ingrandisci"></a></div></div></div></div>
</td>
<td>2) Un'influencer con 4000 follower nelle sue storie esprime la sua opinione in maniera molto energica:<blockquote><p>"TESTE DI CAZZO"</p></blockquote>
</td></tr>
<tr>
<td>3) Una ragazza legge la storia dell'influencer e le scrive in privato il messaggio che segue:<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_2.png" class="image"><img alt="" src="/images/thumb/7/73/Botti_2.png/300px-Botti_2.png" decoding="async" class="thumbimage" srcset="/images/7/73/Botti_2.png 1.5x" data-file-width="362" data-file-height="465" width="300" height="385"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_2.png" class="internal" title="Ingrandisci"></a></div>Immagine 1</div></div></div>
</td>
<td>4) L'influencer, invece di rispondere in privato, pubblica una nuova storia mostrando disprezzo per l'idea della ragazza (senza farne il nome però).<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_3.png" class="image"><img alt="" src="/images/thumb/b/bf/Botti_3.png/300px-Botti_3.png" decoding="async" class="thumbimage" srcset="/images/b/bf/Botti_3.png 1.5x" data-file-width="323" data-file-height="373" width="300" height="346"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_3.png" class="internal" title="Ingrandisci"></a></div>Immagine 2</div></div></div>
</td></tr>
<tr>
<td>5) La ragazza, com'è comprensibile, <b>si offende</b> e risponde a sua volta con una sua storia, taggando l'influencer:<blockquote><p>«la stupidità la colgo nella tua persona e anche la tua cattiveria perché cerchi di mettermi alla gogna pubblica. Se non sai gestire il tuo cane non sono affari miei».</p></blockquote>Si noti che la ragazza ha preso una svista, infatti l'influencer - pur usando toni molto sopra le righe - aveva censurato il suo nome, non l'aveva esposta a pubblica gogna, tuttavia ha solo 300 follower.
</td>
<td>6) L'influencer replica in così:<div class="thumb tnone"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Botti_4.png" class="image"><img alt="" src="/images/thumb/7/72/Botti_4.png/300px-Botti_4.png" decoding="async" class="thumbimage" srcset="/images/7/72/Botti_4.png 1.5x" data-file-width="410" data-file-height="456" width="300" height="334"></a> <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Botti_4.png" class="internal" title="Ingrandisci"></a></div>Immagine 3</div></div></div>
</td></tr>
<tr>
<td>
</td>
<td>
</td></tr></tbody></table>
每个浏览器都有不同的默认值，尽管大多数都是相同的。
设计人员通常通过 normalizing/reseting 使用 Normalize Script 的默认浏览器值来解决这个问题。
您可以在 article.
中阅读更多内容您也可以使用 YUI 中的 CSS reset。它将使您的页面在所有浏览器中更加一致，包括字体渲染。
样式分为2种： 1- default style (agent) 即浏览器默认提供的样式 2- 由开发者创建的修改样式（开发者）。
此样式可能因浏览器而异或因用户修改而异。因此，您可以重置此样式，当涉及到字体大小时，您可以将根元素中的字体大小设置为 62.5%，并使用 rem 单位来处理您的值。因为 62.5% 作为默认浏览器字体大小。
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units