數位交通博物館-謝茵安

網站

數位交通博物館

姓名

謝茵安

檢測日期

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.網站給人一種設計老舊的感覺,很多屆面甚至沒有圖片,看起來很難看,建議改進。

問題

可能原因

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>

補充

圖片

問題

可能原因

怪異的排版

原始程式

位置: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>

問題

可能原因

如果是說中間詭異的藍色間隔的話,那就是因為它加了一個詭異的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;

}

補充

圖片

問題

可能原因

因為它用的是Adobe flash