網站

國立科學工藝博物館

姓名

龎袿方

日期

2017-10-13

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

iPad Air (MD789TA/B)

作業系統版本

8.1.1 (12B435)）

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

Chrome：版本 61.0.3163.100 (正式版本) (64 位元)
Safari：8.1.1 (12B435)

有跑版（影響閱讀）問題

• [首頁][教育資源][科技教育][業務主軸]：圖示編排問題

圖1 safari

圖2 chrome

• [首頁][教育資源][科技教育][教學專區]：圖示編排問題

圖1 safari

圖2 chrome

• [首頁][關於我們][服務陣容]：編排問題

圖1 safari

圖2 chrome

• [首頁][教育資源][科普圖書館][科普圖書館簡介]：下方圖片

圖1 safari

圖2 chrome

有出現亂碼

無

有壞掉的連結

• [首頁][教育資源][蒐藏與研究][藏品精選]：點選後會跳回首頁

圖1 safari

• [首頁][參觀資訊][機器人專區][機器人簡介][表演場次]：點選後會跳回首頁

圖1 safari

有不能用的外掛程式

無|N/A

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

無

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

• [首頁][訊息公告][行事曆]：搜尋鍵應該置於自訂日期下方

圖1 safari

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

可能原因：

使用 css flex 排版
而在 safari 8 時 使用 flex 需要加上 prefix -webkit-

原始程式：

<ul style="
list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;">

建議修改：

<ul style="
list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;">

補充：修改後的版面如下

可能原因：

使用 css flex 排版
而在 safari 8 時 使用 flex 需要加上 prefix -webkit-

原始程式：

https://www.nstm.gov.tw/css/css01/wcmstyle.css

.wcm-photo-three {
    float: left;
    width: 100%;
    text-align: center;
    padding-bottom: 2%;
    display: flex;
}
.wcm-photo-three figure { flex: 1; margin:0px 5px;}

建議修改：

.wcm-photo-three {
    float: left;
    width: 100%;
    text-align: center;
    padding-bottom: 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.wcm-photo-three figure { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin:0px 5px;}

補充：修改後的版面如下

可能原因：

使用 css flex 排版
而在 safari 8 時 使用 flex 需要加上 prefix -webkit-

原始程式：

https://www.nstm.gov.tw/css/css01/wcmstyle.css

.wcm-text-double {float: left; width: 100%; padding-bottom: 2%; display:flex;}
.wcm-text-double .wcm-text-doubleR, .wcm-text-double .wcm-text-doubleL { flex: 1; margin:0px 5px;}

建議修改：

.wcm-text-double {float: left; width: 100%; padding-bottom: 2%; display:-webkit-box; display:-ms-flexbox; display:flex;}
.wcm-text-double .wcm-text-doubleR, .wcm-text-double .wcm-text-doubleL { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin:0px 5px;}

補充：修改後的版面如下

可能原因：

使用 css flex 排版
而在 safari 8 時 使用 flex 需要加上 prefix -webkit-

原始程式：

https://www.nstm.gov.tw/css/css01/wcmstyle.css

.wcm-photo-three {
    float: left;
    width: 100%;
    text-align: center;
    padding-bottom: 2%;
    display: flex;
}
.wcm-photo-three figure { flex: 1; margin:0px 5px;}

建議修改：

.wcm-photo-three {
    float: left;
    width: 100%;
    text-align: center;
    padding-bottom: 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.wcm-photo-three figure { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin:0px 5px;}

補充：修改後的版面如下