1

リスト要素に "float:left" を配置すると、リスト内のリンクのフォントサイズが無視される理由を知っていますか?

現在、リンクは大きくなっていますが、float を追加すると、Firefox、Chrome、Opera のモバイル ブラウザでは小さくなります。Dolphin、Dolphin mini、Opera mini では動作しており、float を追加した後もリンクは大きく (1.5em) のままです。

その理由は何ですか?また、すべてのモバイル ブラウザでリンクを大きくするにはどうすればよいですか?

float:left のない私のテストケースへのリンクは次のとおりです: http://goo.gl/oB6FD3

float:left を使用したテストケースへのリンクは次のとおりです: http://goo.gl/zOujqP

コードは次のとおりです。

<head>
<style>
body {font-size: 100.01%; font-family:Arial, Helvetica, sans-serif;}
li {width: 5em; height: 3em;}
a {font-size: 1.5em;}
h1 {font-size: 1em;}
h2 {font-size: 1em;}
p {font-size: 1em;}
.clear {clear:both;}
</style>
</head>

<body>
<ul>
<li><a href="...">One</a></li>
<li><a href="...">Two</a></li>
<li><a href="...">Three</a></li>
</ul>
<div class="clear"></div>
<br />

<h1>h1 header</h1>                                      
<h2>h2 header</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>

ありがとうございました！

4

3 に答える 3

0

EMを使っているからだと思います。px を使用してみてください。さまざまなブラウザー (モバイルを含む) では、既定でさまざまなフォント サイズが使用されており、これが EM の基になっています。

または、Body フォントを px 値に変更してみてください。

于 2013-11-18T17:56:26.193 に答える
0

ビューポートが理由でしょうか？

于 2013-11-13T21:24:18.583 に答える
0

同じ問題があり、メディアクエリを追加して修正しました。メディアクエリを入れてみてください。うまくいくはずです。

于 2013-11-18T17:39:49.463 に答える