样式在Android WebView中无法正常工作。

Question

这是我的表单 -

    <form name="clmbLead" id="clmbLead_{{FROM_ID}}" method="POST">
    <input type="hidden" id="lineItem_{{FROM_ID}}">
    <input type="hidden" id="ItemId_{{FROM_ID}}">
    <div class="form_div"> <a href="javascript:void(0)" class="closeBtn" onclick="closeLeadfrm('{{FROM_ID}}')">x</a> <div class="form" id="form_{{FROM_ID}}">
    <p>Submit your details in the form below:</p> 
    <div class="fild"><label for="name" >Name</label>
    <input type="text" name="name" id="name_{{FROM_ID}}" placeholder="Name" onKeyPress="removeError(this.id)">
    </div> 
    <div class="fild"><label for="mobile" >Mobile No.</label>
    <input type="text" name="mobile" id="mobile_{{FROM_ID}}" maxlength="10" placeholder="Mobile No."onKeyPress="removeError(this.id)" >
    </div> 
    <div class="fild"><label for="email" >Email ID</label>
    <input style="width:261px" type="text" name="email" id="email_{{FROM_ID}}" placeholder="Email ID" onKeyPress="removeError(this.id)">
    </div> 
    <br clear="all">
    <div style="text-align:center"> 
    <button class="submit_1" onclick="return 

    ReadLeads('{{FROM_ID}}')">Submit</button> 
    </div>
    </div> 
    <div class="thanku-msg" id="thanku-msg_{{FROM_ID}}" style="display: none;">Thanks for sharing your Details!<br>We shall get back to you soon
    </div>
    </div> 
     </form>

form 在 webview 中正常加载。但是，如果我在 form 上方添加以下样式，它就无法正常工作 -

<style> 
 .main_div {position: absolute; width: 100%;top: 0; left: 0; height: 100%;z-index: 9; margin-top:10px;overflow:hidden; } 
 .main_div .required { border-color:red !important; } 
 .main_div .form_div {    background-color: #f5f5f5;border: 1px #dddddd solid;font: normal 14px arial; min-height: 250px;max-width: 500px;max-height: 250px;} 
 .main_div .form_div .form {width:92%;float: left;padding:10px 4%;} 
 .main_div .form_div .form .fild {width:50%;float: left;} 
 .formobile .form_div .form .fild {width:100%;} 
 .main_div .form_div .form .fild label {width: 100%;display: block;padding-bottom:3px;} 
 .formobile .form_div .form .fild label {display:none;} 
 .main_div .form_div .form .fild input {width:90%;padding:10px 0;margin-bottom:10px;padding-left:8px;border-radius:1px;border:1px #c1c1c1 solid;}
.formobile .form_div .form .fild input {width:100%;margin-bottom:15px;} 
 .main_div .form_div .form p {padding:0;margin:0;padding-bottom:10px;margin-bottom:10px;border-bottom:1px #dcdcdc solid;} 
 .formobile .form_div .form {padding-top:60px;padding-bottom: 20px;} 
 .formobile .form_div .form p {position: absolute;width:100%;left:0;top:0;padding: 10px 0;background-color:#EAEAEA;} 
 .formobile .form_div .form p::before {margin-left:10px;content: ""} 
 .main_div .form_div .form button.submit_1{padding:10px 30px;background-color:#e52b02;border:none;border-radius:5px;color: #FFFFFF;font:normal 15px arial;cursor: pointer;} .main_div .form_div .closeBtn {text-decoration: none;font: bold 20px arial;color: #000;right: 0;padding: 5px 10px;} .formobile .form_div .closeBtn {background-color:#EAEAEA;background-color: #DDDDDD;padding: 7px 15px;border-left:1px #D3D3D3 solid;} 
 .main_div .form_div .thanku-msg {position: absolute;margin:auto;left:0;right:0;top:0;bottom:0;width: 250px;height: 50px;text-align: center;} 
 .callLdForm {width: 81px; font: normal 11px arial; text-decoration: none; color: #353535;  text-align: center; display: block;  padding: 2px 0;background-color: rgba(0,0,0,0.2); border: 1px #A9A6A6 solid;border-radius: 3px;}
</style>
<div class="main_div" id="Lead_Frm_{{FROM_ID}}">

我尝试将这个样式放入CSS文件中并添加该CSS文件。但仍未生效。 请建议如何使此样式生效。

WebView代码（我尝试使用内容和文件两种方式）-

browser = new WebView(this);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
setContentView(browser,lp);
browser.getSettings().setJavaScriptEnabled(true);
browser.addJavascriptInterface(new abcInterface(this), "abc");

//put as content
browser.loadData(content, "text/html", "UTF-8");

//or put as html file
browser.loadUrl("file:///storage/emulated/0/dummy6.html");

- ADattatrey

---

你的Android WebView代码是什么？ - Ravi Vaghela

已添加Webview代码，请现在检查。 - ADattatrey

你在浏览器上试过了吗？这个HTML文件在浏览器上完全可以工作吗？ - Ravi Vaghela

这个文件在浏览器上（包括安卓和Windows PC）完美运行。 - ADattatrey

尝试在HTML文件中使用assets文件夹，并在其中调用assest。 - Ravi Vaghela

我不确定，但是你应该关闭输入标记，对吗？ - arc

Answer 1

css/style加载时间过长。

ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
setContentView(browser,lp);

在 style 或 body 中没有宽度和高度参数，因此该代码将 webview 的宽度和高度设置为 0，加载的数据变得不可见。

设置固定的宽度和高度布局参数即可使其可见。

- ADattatrey