問題描述
[首頁][我想要][購買影印卡]：排版問題
可能原因
如果依照 這一個問題 的推論，該網站是使用 CMS 系統構成，而該頁面是 CMS 的某一篇文章內容，應該是上內容的時候寫入了多餘的 HTML 程式碼。
從原始碼當中，看到了巢狀的 .container 元素，依照其他頁面的邏輯來看， .container 應該是每個頁面呈現主要內容的元素模板區域。再者，該區段內也插入了不少僅供此篇文章專用 JS 程式碼。
推測會這樣硬是插入原始碼的用意是為了給下方的意見調查使用。
這段內文的 HTML 來源應該是源自於網站方的內容管理人員，在 CMS 後台本身的 WYSIWYC 編輯器產生的。
<div class="container">
<div class="row">
<article class="col-sm-12 col-md-12">
<div class="accesskey">
<a href="#" accesskey="C" title="中央內容區塊">:::</a>
</div>
<div id="breadcrumb" class="hidden-xs">
<ol class="breadcrumb">
<li><i class="icon-home-1"></i><a href="mp.asp?mp=1" title="首頁">首頁</a></li>
<li class="active"><a href="np.asp?ctNode=1656&mp=1" title="我想要…">我想要…</a></li>
<li class="active">購買影印卡</li>
</ol>
</div>
<div class="Function FunctionTop hidden-xs"><a class="icon-print" target="_blank" href="fp.asp?fpage=cp&xItem=59112&CtNode=1902&mp=1" title="友善列印">友善列印</a><a class="icon-mail-alt" href="form.asp?fpage=cp&spec=form.forward&xItem=59112&CtNode=1902&mp=1" title="轉寄友人">轉寄友人</a><a href="javascript:history.back();" class="icon-reply-1" title="回上一頁">回上一頁</a><noscript>請利用「Backspace鍵」回上頁</noscript>
</div>
<div class="ContentPage CP">
<h2 class="PageTitle">購買影印卡</h2>
<div class="Meta">
<div class="MetaDay"><i class="icon-calendar"></i><span>張貼日期：</span>2016/5/20</div>
<div class="MetaDep"><i class="icon-tags"></i><span>資料來源：</span>秘書室</div>
<div class="MetaDay"><i class="icon-eye"></i><span>點閱：</span>22991</div>
</div>
<p></p><p>一、 本館設有落地型固定式影印機共14台，期刊室3台(1台彩色機型、2台黑白機型)，2樓~6樓各2台(每一樓層各含1台彩色機型、1台黑白機型)，親子中心1樓1台(黑白機型)。（每台影印機皆配讀卡機1台，共14台）</p>
<p>二、 卡片影印<strong>(售卡機):</strong>1樓~6樓各1台，共6台，每張面額100元。</p>
<p>三、 自助式影印之費率：</p>
<p> </p>
<table border="1" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td width="163">
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p> 規</p>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p> 格</p>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p>方</p>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p>式</p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="95">
<p style="text-align: center;"><strong><span style="font-size: medium;">A4</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> B4</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> </span></strong><strong><span style="font-size: medium;">A3</span></strong></p>
</td>
</tr>
<tr>
<td width="163">
<p><span style="font-size: medium;">黑白影印</span></p>
<p><span style="font-size: medium;">(限購買影印卡費用)</span></p>
</td>
<td width="95">
<p><strong><span style="font-size: medium;"> NT$1</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> NT$2</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> </span></strong><strong><span style="font-size: medium;"> NT$3</span></strong></p>
</td>
</tr>
<tr>
<td width="163">
<p><span style="font-size: medium;">彩色影印</span></p>
<p><span style="font-size: medium;">(限購買影印卡使用)</span></p>
</td>
<td width="95">
<p><strong><span style="font-size: medium;"> NT$8</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> NT$12</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> NT$16</span></strong></p>
</td>
</tr>
<tr>
<td width="163">
<p><span style="font-size: medium;">黑白影印 </span></p>
<p><span style="font-size: medium;"> <strong>(</strong><strong>投幣式費用</strong><strong>)</strong></span></p>
</td>
<td width="95">
<p><strong><span style="font-size: medium;"> NT$2</span></strong></p>
</td>
<td width="123">
<p><strong><span style="font-size: medium;"> NT$2</span></strong></p>
</td>
<td width="123">
<p style="text-align: center;"><strong><span style="font-size: medium;">NT$3</span></strong></p>
</td>
</tr>
</tbody>
</table>
<p> </p><p></p>
<div class="List_Download">
<h4><i class="icon-download-outline"></i>附件下載</h4>
<ul>
<li>本館影印機<a href="public/Attachment/73310201118.pdf"><img border="0" src="GIPDSD/xslGip/xslExport/1/1/images/icon_pdf.gif" title="本館影印機(.pdf檔案下載)" alt="本館影印機(.pdf檔案下載)"></a></li>
</ul>
</div><script type="text/javascript">
//window.addEvent('domready', function(){
var tabpanel1 = new TabPanel("tabpanel_1");
widgets.add(tabpanel1);
//});
</script><noscript></noscript>
<div id="container">
<div id="tabpanel_1" class="tabpanel">
<ul id="tablist_1" class="axs tablist">
</ul>
</div>
</div><script type="text/javascript">
window.addEvent('domready', function(){
initApp();
});
</script><noscript></noscript>
<script language="VBS">
function blen(xs) '檢測中英文夾雜字串實際長度
xl = len(xs)
for i=1 to len(xs)
if asc(mid(xs,i,1))<0 then xl = xl + 1
next
blen = xl
end function
function xStdTime(dt) '轉成民國年及時間 999/99/99 10:00 給資料型態為DateTime 使用
if Len(dt)=0 or isnull(dt) then
xStdTime=""
else
xyear = right("000"+ cstr((year(dt)-1911)),3) '補零
xmonth = right("00"+ cstr(month(dt)),2)
xday = right("00"+ cstr(day(dt)),2)
xhour = right("00" + cstr(hour(dt)),2)
xminute = right("00" + cstr(minute(dt)),2)
xStdTime = xyear & "/" & xmonth & "/" & xday & " " & xhour & ":" & xminute
end if
end function
function d7date(dt) '轉成民國年 999/99/99 給資料型態為SmallDateTime 使用
if Len(dt)=0 or isnull(dt) then
d7date=""
else
xy=right("000"+ cstr((year(dt)-1911)),3) '補零
xm=right("00"+ cstr(month(dt)),2)
xd=right("00"+ cstr(day(dt)),2)
d7date=xy & "/" & xm & "/" & xd
d7date=dt
end if
end function
function ChkIDX(SID) '-----身份證字號檢驗
SID = UCase(SID)
X1 = InStr("ABCDEFGHJKLMNPQRSTUVWXYZIO", Left(SID, 1)) + 9
' 初步檢查 ID 的合法性
If X1 < 10 Then Chk_ID = False: Exit Function
If Not IsNumeric(Mid(SID, 2)) Then Chk_ID = False: Exit Function
If Len(SID) <> 10 Then Chk_ID = False: Exit Function
' 檢查編號之正確性
SID = Cstr(X1) + Mid(SID, 2)
nCheckSum = Cint(Mid(SID, 1, 1))
For I = 2 To Len(SID) - 1
nCheckSum = nCheckSum + Cint(Mid(SID, I, 1)) * (11 - I)
Next
nCheckSum = nCheckSum + Cint(Mid(SID, 11, 1))
ChkID = (nCheckSum Mod 10 = 0)
end Function
function ChkID(idno) '-----身份證字號檢驗(新)
if len(trim(idno))=0 then exit function
alpha=UCase(left(idno,1))
d1=mid(idno,2,1)
d2=mid(idno,3,1)
d3=mid(idno,4,1)
d4=mid(idno,5,1)
d5=mid(idno,6,1)
d6=mid(idno,7,1)
d7=mid(idno,8,1)
d8=mid(idno,9,1)
d9=mid(idno,10,1)
select case alpha
case "A" : acc=1
case "B" : acc=10
case "C" : acc=19
case "D" : acc=28
case "E" : acc=37
case "F" : acc=46
case "G" : acc=55
case "H" : acc=64
case "I" : acc=39
case "J" : acc=73
case "K" : acc=82
case "L" : acc=2
case "M" : acc=11
case "N" : acc=20
case "O" : acc=48
case "P" : acc=29
case "Q" : acc=38
case "R" : acc=47
case "S" : acc=56
case "T" : acc=65
case "U" : acc=74
case "V" : acc=83
case "W" : acc=21
case "X" : acc=3
case "Y" : acc=12
case "Z" : acc=30
end select
on error resume next
checksum = acc+8*d1+7*d2+6*d3+5*d4+4*d5+3*d6+2*d7+1*d8+1*d9
check1 = Int(checksum/10)
check2 = checksum/10
check3 = (check2-check1)*10
if len(idno)>10 then
ChkID=false
elseif err.number<>0 then
ChkID=false
elseif checksum=check1*10 then
ChkID=true
elseif d9=(10-check3) then
ChkID=true
else
ChkID=false
end if
end function
function ftpDo(FTPIP,FTPPort,FTPID,FTPPWD,fileAction,FTPfilePath,fileDir,fileTarget,fileSource) '----FTP機制 2004/7/7
response.end
Set oFtp = CreateObject("FtpCom.FTP")
oFtp.Connect FTPIP,FTPPort,FTPID,FTPPWD
if left(oFtp.GetMsg,1) = "2" then
if FTPfilePath <> "" then oFtp.Execute("CWD " + FTPfilePath)
if fileAction="CreateDir" then oFtp.CreateDir(fileDir)
if fileAction="DeleteDir" then oFtp.DeleteDir(fileDir)
if fileAction="MoveFile" then oFtp.MoveFile fileTarget,fileSource,1,0
if fileAction="DELE" then oFtp.Execute("DELE " + fileTarget)
if left(oFtp.GetMsg,1) <> "2" then FTPErrorMSG=" FTP機制出現錯誤,FTP未成功!"
oFtp.LogOffServer
set oFtp = nothing
else
FTPErrorMSG=" FTP機制出現錯誤,FTP未成功!"
oFtp.LogOffServer
set oFtp = nothing
end if
end function
</script>
<script language="JavaScript">
<!--
function Check()
{
if (!(document.menu_list.helptype[0].checked) && !(document.menu_list.helptype[1].checked) && !(document.menu_list.helptype[2].checked)) {
alert("請選擇您覺得本項資訊對您有無幫助!");
return false;
}
document.menu_list.Submit.disabled=true;
return confirm('送出?');
}
//-->
</script>
<form name="menu_list" method="post" action="Survey_RWD_act.asp" onsubmit="return Check();">
<input type="hidden" name="mp" value="1">
<input type="hidden" name="ctNode" value="1902">
<input type="hidden" name="xItem" value="59112">
<input type="hidden" name="SessionID_now" value="402357778">
<!-- 反饋 -->
<div class="Feedback">
<div class="row">
<div class="inner col-xs-12 col-sm-4 col-md-6">您覺得本項資訊對您有無幫助?</div>
<div class="inner col-xs-12 col-sm-8 col-md-6">
<label class="radio-inline">
<input type="radio" name="helptype" id="helptype1" value="1"> 有幫助
</label>
<label class="radio-inline">
<input type="radio" name="helptype" id="helptype2" value="2"> 無意見
</label>
<label class="radio-inline">
<input type="radio" name="helptype" id="helptype3" value="3"> 無幫助
</label>
</div>
</div>
<div class="inner">您對此頁內容如有意見，可透過意見回報反映給我們</div>
<input type="submit" name="send" title="送出" value="送出" class="btn btn-orange">
<input type="button" name="send" title="意見回報" value="意見回報" class="btn btn-gray" onclick="javascript:window.open('sp.asp?xdurl=CuratorMail_RWD/Opinion_feeback.asp&mp=1&ctNode=1902&xItem=59112')" onkeypress="javascript:window.open('sp.asp?xdurl=CuratorMail_RWD/Opinion_feeback.asp&mp=1&ctNode=1902&xItem=59112')">
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="Function FunctionBottom hidden-xs">
<a title="Twitter" href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));" class="Twitter-BTN"><i class="icon-twitter"></i></a>
<a title="Facebook" href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));" class="FB-BTN"><i class="icon-facebook-1"></i></a>
<a title="Plurk" href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));" class="Plurk-BTN"><i class="icon-plurk"></i></a>
<a title="Google+" href="javascript: void(window.open('https://plus.google.com/share?url='.concat(encodeURIComponent(location.href)) ));" class="Google-BTN"><i class="icon-gplus"></i></a>
<a href="#" class="icon-home-1" title="回頁首">回頁首</a>
<a href="javascript:history.back();" class="icon-reply-1" title="回上一頁">回上一頁</a>
</div>
</article>
</div>
</div>
建議解法
要解決此問題，有兩個方向可以 try：
- 把意見調查變成整個 CMS 系統的模組之一不要硬從文章本身插入。
- 把內文的 HTML 重新整理、修正，移除多餘不必要的部分、修正錯誤的巢狀結構。並盡可能避免在內文插入ＣＳＳ，以使用網站 global 已經定義好的樣式為主，內文 HTML 部分僅留下語意化標籤。
改進後台 WYSIWYG，減少產生垃圾巢狀程式碼的機會，或許能夠參考這裡： https://github.com/JefMari/awesome-wysiwyg
