0

Android ブラウザー (Samsung Galaxy Tab) で丸いエッジを表示する際に問題があります。ただし、IOS ブラウザー (iPad および iPhone、つまり Safari) では問題なく動作します。次の図に示すように

画像へのリンクAndroidブラウザでの角丸表示不具合

以下はコードです

<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=false">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cordova-1.8.0.js"></script>
<script type="text/javascript" src="javascript/precache.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>  
</head>
<body>
<div data-role="page" data-theme="c" id="front">
    <div data-theme="b" id="search-container">
        <form id="search-field" action="" method="get" data-ajax="false">
            <input type="search" name="search" value="" />
        </form>
    </div>
</div><!-- /page -->

</body>
</html>

デフォルトの jQuery Mobile スタイルをオーバーライドする必要があるかどうかはわかりません。もしそうなら、誰かが私がオーバーライドしなければならない設定を教えてもらえますか、またはこの問題を克服するための他の解決策があるかどうか.

ただし、ここに示すように、入力フィールドがフォーカスされている場合、これは正常に機能します。フィールドがフォーカスされている場合、角が正しく表示されます

ブラウザでページのソースを表示するとき、これはコードです（divブロック用）

<div id="search-top">
  <form id="search-field" action="" method="get" data-ajax="false">
    <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-b" style="border-radius: 1em;">
      <input type="text" data-type="search" name="search" value="" class="ui-input-text ui-body-b">
      <a href="#" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="b" data-mini="false">
      <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">clear text</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
      </span>
      </a>
    </div>
  </form>
</div>

前もって感謝します

4

1 に答える 1

1

多くのテストの後、私はこの問題の理由を発見しました!

このクラス.ui-shadow-insetをjquery.mobile.cssファイルから削除するだけです。

于 2012-08-21T03:44:35.210 に答える