在寫jsp頁面的過程中,使用了樣式:
.details{width:100%;margin-top:10px;border:1px solid #99bbe8;}.details td{ border:1px solid #99bbe8; padding:3px 4px; font-size:13px;}.details .n{ background-color:#e1edf9; width:100; text-align:right; font-size:12px; color:#000000;}頁面的內容為:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="/WEB-INF/struts-bean.tld" session().getAttribute(GlobalConstant.LOGINUSER.LOGINUSER); String roleType = ((Role) (loginUser.getRoles().toArray())[0]).getRole_type(); String dep = loginUser.getDepartment();%><html xmlns="http://www.w3.org/1999/xhtml"><html:base /><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>證書借用申請(單本)</title><link rel="stylesheet" type="text/CSS" href="<%=basePath%>/commons/css/common.css" /><link rel="stylesheet" type="text/css" href="<%=basePath %>/commons/css/busTicket.css" /><script type="text/Javascript" src="<%=basePath%>/commons/js/jquery.js"></script><script language="javascript" type="text/javascript" src="<%=basePath%>/commons/datepicker/WdatePicker.js" defer="defer"></script><link rel="stylesheet" type="text/css" href="<%=basePath%>/commons/datepicker/skin/WdatePicker.css" /><script type="text/javascript"> //保存 function toApply() { if(validParams()){ if(confirm("確定執行該操作嗎?")) { document.getElementById('form1').submit(); } } } //驗證數據有效性 function validParams(){ if($("#borDepartment").val()=="" || $("#borrower").val()=="" || $("#borPurpose").val()=="" || $("#borDemand").val()=="" || $("#expRevertDate").val()=="") { alert("請將信息填寫完整!"); return false; } return true; } $(function(){ $("#borDepartment").val("<%=dep%>"); }); </script></head><body> <form name="form1" id="form1" method="post" action="<%=basePath%>/contract/certificateAction.do?method=cerBorOne"> <div class="container"> <div> <span class="t2">證書借用申請</span> <span style="margin-left: 10px"> <input type="button" value="保存" class="inputBg9" id="applyButton" onclick="toApply();" ; /> <input type="button" value="返回" class="inputBg9" onclick="history.go(-1);" ; /> <input type="hidden" name="certificateId" id="certificateId" value="${item.certificateId}"/> </span> </div> <span style="margin-top: 10px; display: block">證書信息:</font></span> <table class='details' style="margin-top: 2px"> <tr> <td class='n' width="19%" align="right">證書名稱:</td> <td width="31%"> <c:if test="${not empty item.cName}">${item.cName}</c:if> </td> <td class='n' width="19%" align="right">證書類型:</td> <td width="31%"> <c:if test="${not empty item.cType}">${item.cType}</c:if> </td> </tr> <tr> <td class='n' width="19%" align="right">管理部門:</td> <td width="31%"> <c:if test="${not empty item.department}">${item.department}</c:if> </td> <td class='n' width="19%" align="right">歸屬權:</td> <td width="31%"> <c:if test="${not empty item.attribution}">${item.attribution}</c:if> </td> </tr> </table> <span style="margin-top: 10px; display: block">借用部門填寫:</font></span> <table class='details' style="margin-top: 2px" id="zyAdd"> <tr> <td class='n' width="19%" align="right">借用部門:</td> <td width="31%"> <select name="borDepartment" id="borDepartment" > <option value="">--請選擇--</option> <option value="保密部">保密部</option> <option value="管理部門">管理部門</option> <option value="綜合管理部">綜合管理部</option> </select> </td> <td class='n' width="19%">借用人:</td> <td width="31%"> <input type="text" name="borrower" id="borrower" > </td> </tr> <tr> <td class='n' width="19%">借用目的:</td> <td width="31%"> <input type="text" name="borPurpose" id="borPurpose"> </td> <td class='n' width="19%">借用需求:</td> <td width="31%"> <select name="borDemand" id="borDemand">、、 <option value="" >---請選擇---</option> <option value="查閱">查閱</option> <option value="復印" >復印</option> <option value="借出原件" >借出原件</option> </select> </td> </tr> <tr> <td class='n'>歸還日期:</td> <td> <input type="text" name="expRevertDate" id="expRevertDate" style="width: 80px;" class="Wdate" onfocus="WdatePicker({isShowClear:true,readOnly:true})"/> </td> <td class='n'>借用申請時間:</td> <td> </td> </tr> </table> </div> </form></body></html>但是,在瀏覽器中顯示時,在class=’n’的單元格內,出現了多余的右內邊留白,如下圖:
檢查了很長時間,最后發現,問題出在:在<html>
標簽之前,漏加了:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
也就是,在<html xmlns="http://www.w3.org/1999/xhtml">
標簽前面加上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
即可。 呈現出的正確的頁面效果為:
簡單來說, <!DOCTYPE>
聲明位于文檔中的最前面的位置,處于<html>
標簽之前。用于告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
, 聲明了文檔的根元素是 html,它在公共標識符被定義為 “-//W3C//DTD XHTML 1.0 Transitional//EN” 的 DTD 中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的 DTD。如果找不到,瀏覽器將使用公共標識符后面的 URL 作為尋找 DTD 的位置。 而 <html xmlns="http://www.w3.org/1999/xhtml">
,是在文檔中的 標簽中使用 xmlns 屬性,以指定整個文檔所使用的主要命名空間。
新聞熱點
疑難解答