在 Android 浏览器中显示圆角答案

【问题标题】：Diplaying round corners in Android browser在 Android 浏览器中显示圆角
【发布时间】：2012-07-13 13:57:45
【问题描述】：

我在 Android 浏览器（在三星 Galaxy Tab 中）中显示圆边时遇到问题。但是，它在 IOS 浏览器中运行良好（在 iPad 和 iPhone 中，即 Safari）。如下图所示

图片链接Round corner display problem in Android browser

下面是代码

<!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 样式。如果是这样，任何人都可以让我知道我必须覆盖的配置，或者是否有任何其他解决方案可以解决这个问题。

但是，当输入字段处于焦点时，这可以正常工作，如此处所示Round corners display properly when the field is in focus

当我在浏览器中查看页面源代码时，这是代码（用于 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>

提前致谢

【问题讨论】：

标签： android jquery-mobile rounded-corners android-browser

【解决方案1】：

经过多次测试，我找到了这个问题的原因！

只需从 jquery.mobile.css 文件中删除此类 .ui-shadow-inset。

【讨论】：