數位交通博物館－謝茵安

ray 交通部
, ,
#1

網站

數位交通博物館

姓名

謝茵安

檢測日期

2018-05-03

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本：Chrome 65.0.3325.181

解析度（手機螢幕）

螢幕解析度 360X640

是否會自動跳入行動版欄位？

是

壞掉的連結

首頁>公路博物館>便民服務>相關連結>郵政博物館
image

跑版（影響閱讀）問題

1.內文跑掉(幾乎每個子網站跟界面都有相同問題)解法回文連結
首頁>最新消息
首頁>公路博物館>最新典藏>新富站
首頁>公路博物館>最新典藏>國道五號坪林高架橋
首頁>鐵道博物館>網站導覽
image
2.圖片排列不整齊(幾乎每個子網站跟界面都有相同問題)解法回文連結
首頁>公路博物館>典藏總覽>典藏總覽
image
3.工具位置跑掉，排版看起來很醜。(幾乎每個子網站跟界面都有相同問題)
首頁>公路博物館>典藏總覽>文物查詢
image
4.選單沒有設計好，看起來像跑版。(幾乎每個子網站跟界面都有相同問題)解法回文連結
首頁>公路博物館>便民服務
image

無法操作的網頁元素（如按鈕不能按、選單不能選等）

1.點進內頁後發現都是空白，沒有遊戲。解法回文連結
首頁>便民服務>小遊戲>超級工程師
首頁>便民服務>小遊戲>國道連連看
首頁>便民服務>小遊戲>大家來找碴
首頁>便民服務>小遊戲>高速公路配對翻翻看
image

出現亂碼

無

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

無

網站載入緩慢（相對一般網站）

無

閱讀模式

Android系統

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

1.該業面原本是四個連結一排，但點連結之後又會變成三個連結一排，看起來很醜。(幾乎每個子網站跟界面都有相同問題)解法同上
首頁>公路博物館>典藏總覽>典藏總覽
image
首頁
2.選單公路博物館明明是一個連結，卻被分成了兩行，看起來很怪，同時也容易讓人誤會，以為是不是有別的選項。
首頁
image

對此網站建議（非程式問題皆放置這裡）

1.公路、鐵道、航空、海運這四個子網頁感覺都是用一樣的設計，所以問題也都重複。
2.網站給人一種設計老舊的感覺，很多屆面甚至沒有圖片，看起來很難看，建議改進。

#2

問題

可能原因

table width設定錯誤

原始程式

位置：最新消息-交通部數位交通博物館 : 702

            <tr style="font-size: smaller;" align="left">
                <td width="15%" class="font1"><img src="images/arrow.gif" alt="*"/>&nbsp;&nbsp;發布日期：
                </td>
                <td class="font1_1">2018-04-26
                </td>
            </tr>

建議修改

還是建議不要用table最好，修table width只是治標不治本

<td class="font1" width="35%"><img src="images/arrow.gif" alt="*">&nbsp;&nbsp;發布日期：
                </td>

補充

圖片

#3

問題

可能原因

怪異的排版

原始程式

位置：https://transport-museum.nat.gov.tw/highway/cultural_relic_class.jsp : 406

            <div id="top4link">
                
                <a href="home.jsp?id=12&mcustomize=cultural_relic_list.jsp&serno=201512090001" title="&#x7279;&#x5225;&#x8ca2;&#x737b;&#x4eba;&#x7269;">
                <div class="pic_text box_bg box_radius">

                        <img src="/uploaddowndoc?file=delegate/201512090001.jpg&filedisplay=201512090001.jpg&flag=pic" width="215px" height="185px" alt="*" onerror="this.src='images/noimg.jpg'">
                        <p class="top4link_text">&#x7279;&#x5225;&#x8ca2;&#x737b;&#x4eba;&#x7269;</p>

                </div> </a>
                
                <a href="home.jsp?id=12&mcustomize=cultural_relic_list.jsp&serno=201512090005" title="&#x4ea4;&#x901a;&#x7968;&#x8b49;">
                <div class="pic_text box_bg box_radius">

建議修改

用bootstrap grid

<div id="top4link">
    <div class="col-md-4 col-xs-12">

        <a href="home.jsp?id=12&mcustomize=cultural_relic_list.jsp&serno=201512090001" title="&#x7279;&#x5225;&#x8ca2;&#x737b;&#x4eba;&#x7269;">
                <div class="pic_text box_bg box_radius"> ......
    </div>
</div>
#4

問題

可能原因

如果是說中間詭異的藍色間隔的話，那就是因為它加了一個詭異的margin-top

原始程式

位置：https://transport-museum.nat.gov.tw/highway/css/nav-core.min.css

.nav ul {
    display: block;
    position: relative;
    zoom: 1;
    list-style-type: none;
    margin: 0;
        margin-top: 0px;
        margin-left: 0px;
    padding: 0;
    margin-top: 40px;
}

建議修改

.nav ul {
    display: block;
    position: relative;
    zoom: 1;
    list-style-type: none;
    margin: 0;
        margin-top: 0px;
        margin-left: 0px;
    padding: 0;

}

補充

圖片

#5

問題

可能原因

因為它用的是Adobe flash