2

似乎如果我将列表视图分配为内联并使用主题 a 或 b，则列表上的第一个和最后一个箭头图标在 FIREFOX pc 浏览器中显示为灰色而不是预期的颜色（移动 firefox 似乎很好）。有时它既是第一个图标又是最后一个图标，而其他时候我可以刷新它是一个或另一个。

我测试了其他主题，只有 a & b 似乎有这个显示问题，第一个和最后一个箭头的颜色不正确，它也只发生在我对这些主题使用 data-inset=true 时。如果我删除数据插入，那么显示就很好。

有没有人找到解决这个问题的方法？我真的希望我的列表视图能够插入并使用主题 b。

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('include/jquery.mobile-1.3.1.min.css');
</style> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" /> 
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

</div>
</div>
</body>
</html>
4

1 回答 1

1

这可能是firefox中的一个错误。我看到的是它与css中的border-radius属性密切相关。当它设置为 0 时，箭头以正确的方式显示。

如果您很高兴不在第一个和最后一个项目中使用粗边框，只需删除 set

border-radius: 0;

对于以下课程：

.ui-first-child
.ui-last-child

在 jquery 移动 css 中。

另一个不太好的选择是像这样动态设置它们：

$(".ui-first-child, .ui-last-child").css("border-radius", 0);

如果您不想在第一个和最后一个项目中丢失边界半径，我还没有找到解决这个问题的方法。

以防万一 - 这是我用来摆弄的 jsFiddle - http://jsfiddle.net/n4grz/1/

于 2013-07-30T15:31:38.537 回答