1
私はh1ヘッダーを持つブートストラップジャンクトロンを持っています。 H1ヘッダとCSS:クロムの文字がピクセルズームで異なる色で囲まれているのはなぜですか?
画像:
:H2ヘッダと画像IがH1ヘッダがH2にすることを変更したとき、私は文字色であった変化を囲まれていることを把握します
image1 htmlコード:
<div class="container">
<div class="jumbotron">
<h1>Admin Template</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
</div>
</div>
Image1のCSSコード:
@media screen and (min-width: 768px)
.jumbotron h1, .jumbotron .h1 {
font-size: 63px;
}
.jumbotron h1, .jumbotron .h1 {
color: inherit;
}
h1, .h1 {
font-size: 36px;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 300;
line-height: 1.1;
color: #fff;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Inherited from div.jumbotron
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #252830;
}
Inherited from body
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #CFD2DA;
background-color: #252830;
font-weight: 300;
}
Inherited from html
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
画像2のHTMLコード:
<div class="container">
<div class="jumbotron">
<h2>Admin Template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
</div>
</div>
画像2 CSSコード:
h2, .h2 {
font-size: 30px;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 300;
line-height: 1.1;
color: #fff;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Inherited from div.jumbotron
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #252830;
}
Inherited from body
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #CFD2DA;
background-color: #252830;
font-weight: 300;
}
Inherited from html
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
この動作への説明がありますか? テキストを常に灰色で囲むことはできますか?
テキストに関連するものAnti alias。関連した質問:http://stackoverflow.com/questions/761778/forcing-anti-aliasing-using-css-is-this-a-myth – Luciano
これは単なるアンチエイリアスです。 –
しかし、なぜ私は別の動作を得た?時には異なる色に囲まれ、時にはグレーのみで囲まれている – YouneL