2

リストビューをインラインに割り当て、テーマ a または b を使用すると、リストの最初と最後の矢印アイコンが、FIREFOX PC ブラウザーで意図した色ではなく灰色で表示されるようです (モバイル Firefox は問題ないようです)。最初と最後のアイコンの両方である場合もあれば、更新できるアイコンである場合もあります。

私は他のテーマをテストしましたが、最初と最後の矢印が正しい色ではないというこの表示の問題があるのは a & b だけのようでした。また、これらのテーマで data-inset=true を使用した場合にのみ発生します。data-inset を削除すると、表示は問題ありません。

誰かが見つけたこれを回避する方法はありますか? リストビューを挿入してテーマ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 に答える