奇妙なChromeの「機能」がわかりません。レスポンシブデザインでfieldset
を使用すると、フィールドセット内のテキストがページの他のコンテンツと比較して非常に大きく表示されることがあります。モバイルデバイスでフィールドセット内のテキストが表示されることがあるのはなぜですか?
私はテキストから数文字を削除すると、それは突然、ページ上の他のブロックと同じサイズになります。
たとえば、次のページは、デバイスモードを使用してChromium 49によって生成されます。 Chromeを実行しているAndroidスマートフォンでは、表示が非常に似ています。レスポンシブデザインモードのFirefoxには不具合がありません。
これはthe corresponding codeです。外部CSSファイルはありません。コードのこの部分で
<html>
<head>
<style>
body{font-size:.8em;}
</style>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus
cipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen
tum orci, id vulputate nisl mauris non mas.
</p>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non mas.
</p>
</fieldset>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non ma.
</p>
</fieldset>
</div>
</body>
</html>
、ページの最初<p>
及び第<fieldset>
内の一つは、同じテキストを含みます。 2番目の段落には1文字少ない文字列が含まれています。
何が起こっていますか?醜い回避策は、スタイルでfieldset{font-size:.999em;}
を指定から成る
注意。 3つの段落がすべて同じように見えるようにします。これは、私はこの回避策/ハックではなく、この機能/グリッチの起源についてより興味を持っていると言われています。