【发布时间】：2014-03-12 02:59:01
【问题描述】：
我有一个基于 Webview 的 Android 应用。
应用程序的主要部分是使用 JS、HTML 和 CSS 设计的。它也基于 Bootstrap。
在全球范围内，该应用运行良好。但是今天让我担心的问题是：一个按钮没有正确显示，但这个问题只在今天的一款智能手机型号上出现（Android 4.2.2 下的阿尔卡特 TCT Orange Hiro）。
按钮是用 CSS 绘制的圆圈设计的。智能手机上方的圆圈显示为正方形，好像 Webview 既不理解border-radius 也不理解-webkit-border-radius CSS 命令。
HTML：
<div class="row-fluid">
<div class="text-center">
<div id="button_border" class="button_play">
<div id="button_content" class="button_play">
<div id="button_content_play" class="pictogramme">▶</div>
</div>
</div>
</div>
</div>
编辑：CSS 是通过以下方式在 HTML 中加载的：
<link rel="stylesheet" type="text/css" href="css/main.css" />
为此，CSS 包含：
/*position and global appearance of the button's outer portion. The circle is drawn by using border-radius: 50% */
#button_border {
display: block;
position: absolute;
top: 27%;
left: 20%;
width: 55%;
z-index: 7;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*Specific design for the play button's outer portion*/
#button_border.button_play {
background-color: #01b169;
border: solid .5em #3c3e43;
}
/*Button colors change when touched*/
#button_border.button_play:focus,
#button_border.button_play:hover {
color: white;
background-color: white;
}
/*Position and global appearance of the button's body portion. The circle is drawn by using border-radius: 50% */
#button_content {
position: absolute;
z-index: 8;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#button_content.button_play {
background-color: white;
color: #01b169;
border: solid .1em #01b169;
}
/*Body button colors change when touched*/
#button_content.button_play:focus,
#button_content.button_play:hover {
color: white;
background-color: #01b169;
}
/*Play symbol has to be centered in the button*/
#button_content_play {
text-align: center;
}
编辑：加载 web 视图的 java 代码如下：在我的 MainActivity 的 onCreate() 方法中，我有：
webView = (WebView) findViewById(R.id.webView);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDatabaseEnabled(true);
settings.setDomStorageEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
// Add HTML views to the webviews
webView.loadUrl("file:///android_asset/www/home.html");
/**
* Allow access from file URL (for AJAX request and
* internationalization)
*/
if (Build.VERSION.SDK_INT >= 16) {
Class<?> clazz = webView.getSettings().getClass();
Method method;
try {
method = clazz.getMethod("setAllowUniversalAccessFromFileURLs",
boolean.class);
if (method != null) {
method.invoke(webView.getSettings(), true);
}
} catch (NoSuchMethodException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (InvocationTargetException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
有人知道我该如何解决这个问题吗？
注意：我遇到的其他困难是我自己无法重现该问题，因为我不拥有此特定设备，并且 Android 4.2.2 的模拟器按预期显示按钮。
提前谢谢你救了我的命
【问题讨论】：
-
告诉我你的代码如何将
css加载到webview？ -
我编辑了我的问题，添加了加载 web 视图的 java 代码和链接 CSS 文件的 html 代码
标签： android html android-webview css