Question

当我将“float：left”放入list-elements时，你知道为什么列表中链接的字体大小会被忽略吗？

现在链接很大，但添加浮动后，它们在以下移动浏览器中变小：Firefox，Chrome，Opera。在Dolphin，Dolphin mini和Opera mini它正在工作，并且在添加浮动后链接保持很大（1.5em）。

这是什么原因以及如何在每个移动浏览器中获得大的链接？

这是我没有浮动的测试用例的链接：left：http://goo.gl/oB6FD3

以下是我的测试用例的链接：float：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>

谢谢！

Answer 1

可能是视口的原因吗？

Answer 2

我遇到了同样的问题并通过添加媒体查询来修复它。尝试放置媒体查询，它应该可以工作。

Answer 3

我相信这是因为你使用EM。尝试使用px。不同的浏览器（包括移动设备）默认使用不同的字体大小，这是EM的基础。

或者，您可以尝试将Body字体更改为px值。

在添加：float：left时，某些移动浏览器会忽略font-size

3 个答案: