科技部科技大擂台-柯宥辰

[YungYu]

網站

科技部科技大擂台

姓名

柯宥辰

檢測日期

2018-05-06

檢測裝置

i6
MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)

作業系統 與 瀏覽器版本

ios 10.12.6

解析度（手機螢幕）

375*667 pixels

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

rwd

壞掉的連結

無

跑版（影響閱讀）問題

• 圖片被切掉 (解法回文連結)
  [首頁]
  

---

• 文字跑版 (解法回文連結)
  [首頁>活動列表>科技大擂台2：AI資安攻防戰]（標題部分不要分開，閱讀上會比較輕鬆）
  

---

• 文字重疊且字體被蓋住 (解法回文連結)
  [首頁>活動列表>科技大擂台2：AI資安攻防戰>討論區]
  

---

• 文字被擋住（手機要下拉才看得到全部） (解法回文連結)
  [首頁>聯絡我們]
  [首頁>帳號登入]
  [首頁>活動列表]
  [首頁>最新消息]
  

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不可以用

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

無

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

anything

[YungYu]

問題：

圖片被切掉

[首頁]

可能原因：

圖片過大，比例不符

原始程式：

位置：https://fgc.stpi.narl.org.tw/index

建議修改：

已測試，非程式問題，問題無法修復
圖片比例不符合，過寬。即使使用電腦檢視依舊超出版面。
建議裁切。

[YungYu]

問題：

@YungYu

文字跑版

[首頁>活動列表>科技大擂台2：AI資安攻防戰]（標題部分不要分開，閱讀上會比較輕鬆）

原始程式：

位置：https://fgc.stpi.narl.org.tw/activity/SFund :113

建議修改：

<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
	<tbody>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">一、競賽目的 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;" valign="center">二、賽程規劃 </span></td>
			<td style="vertical-align: middle;"><img alt="" src="/uploadImages/images/time.jpg" style="max-width: 600px;"><img alt="" src="/uploadImages/images/1524452893521.jpg" style="max-width: 600px;"></td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">三、參賽方式與資格 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">四、企業出題 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">五、競賽方式 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">六、徵件主題</span><span style="color:#999933;"> </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">七、競賽評分方式 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">八、獎勵方式 </span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">九、注意事項</span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
		<tr>
			<td style="vertical-align: middle;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 15%;"><span style="color:#999933;">十、競賽簡章</span></td>
			<td style="vertical-align: middle;">......</td>
		</tr>
	</tbody>
</table>

在css中加上

td {padding: 1px 5px;}
td+td {border-left: 2px solid #999933;}

補充：

[YungYu]

問題：

@YungYu

文字重疊且字體被蓋住

[首頁>活動列表>科技大擂台2：AI資安攻防戰>討論區]

可能原因：

使用position:absolute;

原始程式：

位置：https://fgc.stpi.narl.org.tw/css/front/layout.css :204

a.backhome {
	background: url(../../images/index/icon_back.png) no-repeat left center;
	padding-left: 35px;
	height:30px;
	line-height:30px;
	font-size:15px;
	position:absolute;
	right:0;
	bottom:15px;
	display:block;
	font-weight:normal;
}

建議修改：

a.backhome {
	background: url(../../images/index/icon_back.png) no-repeat right center;
	padding-right: 35px;
	height:30px;
	line-height:30px;
	font-size:15px;
	display:block;
	font-weight:normal;
	text-align: right;
}

補充：

[YungYu]

問題：

@YungYu

文字被擋住（手機要下拉才看得到全部）

[首頁>聯絡我們]
[首頁>帳號登入]
[首頁>活動列表]
[首頁>最新消息]

可能原因：

上方功能列擋住區塊

原始程式：

位置：https://fgc.stpi.narl.org.tw/css/front/layout.css :101

h1.contact{
	color:#fff;
	font-size:2.25em;
	font-family: impact, serif,"Microsoft JhengHei";
	margin: 0 auto;
	text-align:center;
	width:100%;
	padding: 55px 0 0 0;
	height:183px;
	display:block;
	background:url(../../images/index/inBanner_contact.jpg) no-repeat center top;
}

建議修改：

用margin把整個區塊下移

h1.contact{
	color:#fff;
	font-size:2.25em;
	font-family: impact, serif,"Microsoft JhengHei";
	margin: 85px 0 0 0;
	text-align:center;
	width:100%;
	padding: 55px 0 0 0;
	height:183px;
	display:block;
	background:url(../../images/index/inBanner_contact.jpg) no-repeat center top;
}

補充：

結尾：

如果不希望寬版螢幕的功能列與標題圖中間留有空白
margin屬性可限定在螢幕較小時