基隆港務分公司臺北港全球資訊網-中文網 - 范玟瑄

ray 交通部
#1

網站

基隆港務分公司臺北港全球資訊網-中文網

姓名

范玟瑄

日期

2017-11-11

瀏覽器解析度（iOS的Safari填裝置名稱 macOS填瀏覽器解析度）

1024 * 768

作業系統版本

Windows 10 家用版
iOS 11.0 (15A372)

瀏覽器版本（iOS的Safari填iOS版本）

Chrome：61.0.3163.100 (正式版本) (64 位元)
Safari：版本 11.0

有發現表格排版影響閱讀問題（大量table爆炸可以截示意圖列出位置就好）

圖1

圖2

圖1

圖2

圖1

圖2

圖1

圖2

有跑版（影響閱讀）問題

圖1

圖2

圖1

圖2

圖1

圖2

圖1

圖2

有出現亂碼

無

有壞掉的連結

無

有不能用的外掛程式（ActiveX、Applet、Flash、Silverlight、…）

無|N/A

有不能運作的網頁元素（如按鈕不能按、選單不能選等）

圖1

圖2

圖1

圖2

圖1

圖2

圖

其他（無法判斷屬於以上那個分類的都放在這邊）

圖1

圖2

對此網站建議（給個建議吧）

☆
網站元素很不一致，有得字形顏色是藍色，有的是紅色，可以點擊的地方跟不可以點擊的地方也不明顯。
表格也些很陽春，有些卻有底色，也很不一致。
網頁連接也很不一致，有些另開啟新網頁，有些是原始網頁連結。
最新消息的地方只有在首頁才能看到，其他地方無法連結進來，網站導覽裡也找不到。
不知道為什麼網路資訊更新的網速也有點慢。

#2

可能的原因：

css 寬度寫死
可能是所見即所得的編輯器產生的

原始程式：

<table border="1" cellspacing="1" style="width: 728px; height: 618px;">

建議修改：

<table border="1" cellspacing="1" style="width: 100%;height: 618px;">
#3

最新消息跑版

可能的原因：

css 樣式 濫用 position: absolute; 使 dom 浮動

原始程式：

https://kl.twport.com.tw/tp/css/integral.css

.tab_container{position:absolute; clear:left;width:100%;border:1px solid #CCC;background: #fff;padding: 10px 10px 15px 10px;border-top: 1px solid #5A86C3;}

建議修改：

.tab_container{width:100%;border:1px solid #CCC;background: #fff;padding: 10px 10px 15px 10px;border-top: 1px solid #5A86C3;}

Footer 跑版：

可能的原因：

css 寬度樣式 設定不當

原始程式：

https://kl.twport.com.tw/tp/css/rwd_layout.css

@media screen and (min-width: 769px) and (max-width:1024px){
    body {
        width:1024px;
    }
 .footer_bg
   {
       width:1240px;
   }
}

建議修改：

@media screen and (min-width: 769px) and (max-width:1024px){
    body {
        width:1024px;
    }
}
#4

可能的原因：

沒有強制文字不換行跟字體過大

原始程式：

https://kl.twport.com.tw/tp/css/page_1024.css

.menu a{
	background:url(../images/menu_line.png) no-repeat right 20px;
	color: #333;
	font-size: 1.3em;
	text-decoration:none;
	display:block;
	font-family: "微軟正黑體",Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 3px #777474;
	font-weight: 500;
	padding-top: 10px;

}

建議修改：

.menu a{
	word-break: keep-all;
	background:url(../images/menu_line.png) no-repeat right 20px;
	color: #333;
	font-size: 1.1em;
	text-decoration:none;
	display:block;
	font-family: "微軟正黑體",Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 3px #777474;
	font-weight: 500;
	padding-top: 10px;
}
#5

可能的原因

CSS 使用不當