請問網頁排版,當瀏覽器顯示比例調整放大到125%時,網頁會出現破版!

網頁製作網頁排版網頁製作網頁 html

myubuntu 2017-02-15 18:30:08 ‧ 4790 瀏覽

分享至

您好

請問:當瀏覽器顯示比例調整放大到125%時,網頁會出現破版!
這種問題應該如何修改現有網頁不要出現這種情況呢?

http://library.taiwanschoolnet.org/cyberfair2016/buddhaists/comeback/comeback001.html

看更多先前的討論...收起先前的討論...

newkevin iT邦高手 1 級 ‧ 2017-02-15 20:09:09 檢舉

哪邊破可以貼一下貼圖並說是哪個瀏覽器還有版本

myubuntu iT邦新手 4 級 ‧ 2017-02-15 21:02:43 檢舉

https://drive.google.com/drive/folders/0BzlzZ8hgGD0wN3h5M041T095WVk?usp=sharing

myubuntu iT邦新手 4 級 ‧ 2017-02-15 21:02:55 檢舉

https://drive.google.com/drive/folders/0BzlzZ8hgGD0wN3h5M041T095WVk?usp=sharing

窮嘶發發發 iT邦高手 1 級 ‧ 2017-02-16 09:15:28 檢舉

這個問題有點深度，要解決要有一點功底，要先看你的要求如果只是不要破版
那麼你的 DIV 物件就必須讓他自適性能夠自動調整大小，但如果遇到 DIV 有設定底圖的狀況下
對某些瀏覽器來說，底圖自動調整大小的語法，並非全部支援，這一點要特別注意
至於文字大小，個人建議用 em 為單位，不要用 px ，然後適當的用 % 的話，會簡化一些編排的

myubuntu iT邦新手 4 級 ‧ 2017-02-16 09:34:02 檢舉

您好因為是單純使用table排版,應該要怎麼改會比較好呢?
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">

<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="1024">
<tr>
<td><img name="comeback_r1_c1" src="images/comeback_r1_c1.png" width="118" height="56" alt=""></td>
<td><a href="../index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('001','','images/comeback_r1_c2002.png',1)"><img src="images/comeback_r1_c2.png" alt="首頁" width="60" height="56" id="001"></a></td>
<td><a href="comeback001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('002','','images/comeback_r1_c3002.png',1)"><img src="images/comeback_r1_c3002.png" alt="歸來接蒡" width="108" height="56" id="002"></a></td>
<td><a href="../002comelife/comelife001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('003','','images/comeback_r1_c4002.png',1)"><img src="images/comeback_r1_c4.png" alt="歸寶重現" width="102" height="56" id="003"></a></td>
<td><a href="../003vocation/3vocation001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('004','','images/comeback_r1_c6002.png',1)"><img src="images/comeback_r1_c6.png" alt="牛蒡志業" width="106" height="56" id="004"></a></td>
<td><a href="../004combest/4combest001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('005','','images/comeback_r1_c8002.png',1)"><img src="images/comeback_r1_c8.png" alt="超牛栽種" width="106" height="56" id="005"></a></td>
<td><a href="../005betalent/5betalent001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('006','','images/comeback_r1_c9002.png',1)"><img src="images/comeback_r1_c9.png" alt="牛蒡達人" width="102" height="56" id="006"></a></td>
<td><a href="../007teamdiary/teamstudy001.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('007','','images/comeback_r1_c11002.png',1)"><img src="images/comeback_r1_c11.png" alt="學習日誌" width="106" height="56" id="007"></a></td>
<td><a href="../narrative.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('008','','images/comeback_r1_c13002.png',1)"><img src="images/comeback_r1_c13.png" alt="專題簡報" width="98" height="56" id="008"></a></td>
<td><img name="comeback_r1_c14" src="images/comeback_r1_c14.png" width="118" height="56" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><img name="comeback_r2_c1" src="images/comeback_r2_c1.png" width="1024" height="178" alt=""></td>
</tr>
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="1024">
<tr>
<td><img name="comeback_r3_c1" src="images/comeback_r3_c1.png" width="358" height="64" alt=""></td>
<td><a href="comeback001.html"><img src="images/comeback_r3_c5002.png" width="128" height="64" alt="歸來再造"></a></td>
<td><a href="comeback002.html"><img name="comeback_r3_c7" src="images/comeback_r3_c7.png" width="132" height="64" alt=""></a></td>
<td><a href="comeback003.html"><img name="comeback_r3_c10" src="images/comeback_r3_c10.png" width="138" height="64" alt=""></a></td>
<td><img name="comeback_r3_c12" src="images/comeback_r3_c12.png" width="268" height="64" alt=""></td>
</tr>
</table></td>

您好  因為是單純使用table排版,應該要怎麼改會比較好呢?
&lt;table style=&quot;display: inline-table;&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;1024&quot;&gt;
  &lt;!-- fwtable fwsrc=&quot;comeback.png&quot; fwpage=&quot;页面 1&quot; fwbase=&quot;comeback.png&quot; fwstyle=&quot;Dreamweaver&quot; fwdocid = &quot;946817362&quot; fwnested=&quot;1&quot; --&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;table style=&quot;display: inline-table;&quot; align=&quot;&quot;left&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;1024&quot;&gt;
	  &lt;tr&gt;
	   &lt;td&gt;&lt;img name=&quot;comeback_r1_c1&quot; src=&quot;images/comeback_r1_c1.png&quot; width=&quot;118&quot; height=&quot;56&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../index.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('001','','images/comeback_r1_c2002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c2.png&quot; alt=&quot;首頁&quot; width=&quot;60&quot; height=&quot;56&quot; id=&quot;001&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;comeback001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('002','','images/comeback_r1_c3002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c3002.png&quot; alt=&quot;歸來接蒡&quot; width=&quot;108&quot; height=&quot;56&quot; id=&quot;002&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../002comelife/comelife001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('003','','images/comeback_r1_c4002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c4.png&quot; alt=&quot;歸寶重現&quot; width=&quot;102&quot; height=&quot;56&quot; id=&quot;003&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../003vocation/3vocation001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('004','','images/comeback_r1_c6002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c6.png&quot; alt=&quot;牛蒡志業&quot; width=&quot;106&quot; height=&quot;56&quot; id=&quot;004&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../004combest/4combest001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('005','','images/comeback_r1_c8002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c8.png&quot; alt=&quot;超牛栽種&quot; width=&quot;106&quot; height=&quot;56&quot; id=&quot;005&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../005betalent/5betalent001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('006','','images/comeback_r1_c9002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c9.png&quot; alt=&quot;牛蒡達人&quot; width=&quot;102&quot; height=&quot;56&quot; id=&quot;006&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../007teamdiary/teamstudy001.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('007','','images/comeback_r1_c11002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c11.png&quot; alt=&quot;學習日誌&quot; width=&quot;106&quot; height=&quot;56&quot; id=&quot;007&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;../narrative.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('008','','images/comeback_r1_c13002.png',1)&quot;&gt;&lt;img src=&quot;images/comeback_r1_c13.png&quot; alt=&quot;專題簡報&quot; width=&quot;98&quot; height=&quot;56&quot; id=&quot;008&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;img name=&quot;comeback_r1_c14&quot; src=&quot;images/comeback_r1_c14.png&quot; width=&quot;118&quot; height=&quot;56&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
	  &lt;/tr&gt;
	&lt;/table&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;img name=&quot;comeback_r2_c1&quot; src=&quot;images/comeback_r2_c1.png&quot; width=&quot;1024&quot; height=&quot;178&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;table style=&quot;display: inline-table;&quot; align=&quot;&quot;left&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;1024&quot;&gt;
	  &lt;tr&gt;
	   &lt;td&gt;&lt;img name=&quot;comeback_r3_c1&quot; src=&quot;images/comeback_r3_c1.png&quot; width=&quot;358&quot; height=&quot;64&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;comeback001.html&quot;&gt;&lt;img src=&quot;images/comeback_r3_c5002.png&quot; width=&quot;128&quot; height=&quot;64&quot; alt=&quot;歸來再造&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;comeback002.html&quot;&gt;&lt;img name=&quot;comeback_r3_c7&quot; src=&quot;images/comeback_r3_c7.png&quot; width=&quot;132&quot; height=&quot;64&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;a href=&quot;comeback003.html&quot;&gt;&lt;img name=&quot;comeback_r3_c10&quot; src=&quot;images/comeback_r3_c10.png&quot; width=&quot;138&quot; height=&quot;64&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/td&gt;
	   &lt;td&gt;&lt;img name=&quot;comeback_r3_c12&quot; src=&quot;images/comeback_r3_c12.png&quot; width=&quot;268&quot; height=&quot;64&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
	  &lt;/tr&gt;
	&lt;/table&gt;&lt;/td&gt;

修改

newkevin iT邦高手 1 級 ‧ 2017-02-16 12:25:26 檢舉

N年前
總寬度設100% 然後假設有5格個就各設寬度20%
高度通常都固定的
因為程式英中對照表
早不知道到哪去了
不知道到怎麼改呵呵
現在不知道都怎麼設
看各位先進大大了
"九個適應性設計小撇步" 關鍵字看是否有幫助