MozTW 討論區
https://forum.moztw.org/

經濟部水利署網頁的表格不正常
https://forum.moztw.org/viewtopic.php?f=13&t=13339		 第 1 頁 (共 1 頁)
發表人:  55126 [ 2006-03-23, 15:58 ]
文章主題 :  經濟部水利署網頁的表格不正常
sorry，更新連結！
http://www.wra.gov.tw/ct.asp?xItem=14326&ctNode=3742
在最新水情的表格處，IE正常顯示，FF顯示錯誤！

附加檔案:
ff.jpg [34.25 KiB]
被下載 325 次
ie.jpg [39.22 KiB]
被下載 334 次
發表人:  coolcd [ 2006-03-23, 17:59 ]
文章主題 : 
能說說哪裡顯示錯誤嗎?
是不是這個網頁?
感覺上看不太出來有什麼錯呀~

以我自己看到的為例
如果最小字型設成 15
表格版面會有點亂掉
發表人:  coolcd [ 2006-03-24, 13:32 ]
文章主題 : 
那個看起來像表格的東西其實是用 span + CSS 做出來的
選單的 html 與 css 分別是
代碼:
<div class="MainMenu2">
<span><a href="..." title="本署簡介">本署簡介</a></span>
<span><a href="..." title="........">........</a></span>
......
</div>

代碼:
.MainMenu2 {
   border-right: 1px solid #FFFFFF;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #8C7926;
   border-bottom: 2px solid #8C7926;
   background: #634B0D url(../images_3/MainMenu2Bg_2.gif);
   text-align: right;
   width: 755px;
   padding: 2px 10px;
}
.MainMenu2 a {
   background: url(../images_3/BulletMmenu.gif) no-repeat 2px 2px;
   font-size: 75%;
   white-space: nowrap;
   text-decoration: none;
   color: #FBF8D0;
   display: inline-block;
   border-right: 1px solid #B5B2B2;
   border-bottom: 1px solid #B5B2B2;
   text-align: right;
   padding-top: 1px;
   padding-right: 2px;
   margin-top: 2px;
   width: 7em;
}
.MainMenu2 a:hover {
   background: url(../images_3/BulletMmenum.gif) no-repeat 2px 2px;
   text-decoration: none;
   color: #FFFFFF;
   border-right: 1px solid #FFCC99;
   border-bottom: 1px solid #FFCC99;
}


其中，那個 display: inline-block 好像是 IE Only 的語法
因為我在 W3C 查不到這個東西
最簡單的方法 要讓這東西看起來整齊的話
依據 W3C 標準
應改成 display: table-cell
但 IE 應該尚未支援這個屬性
所以呢... 直接在 HTML 改用 table 比較簡單啦～
真的想用 CSS... 那 HTML 最好改一下
把想放在同一欄的 item 用 div 包起來
會比較好處理

可以參考這一篇的作法。
發表人:  不惑仔Boohover [ 2006-03-25, 13:46 ]
文章主題 :  把導覽列改用ul應是比較標準的方法
div.MainMenu2裡的導覽列的每個連結a之間，僅以span圍繞，如果沒有類似「|」的間隔符號，將不符無障礙網頁的規範，所以依照原來的方式，還必須加入間隔符號，實在增添麻煩，應該改用ul製作導覽列就會符合無障礙規範，而且ie和fx都會正確顯示，類似以下作法：
代碼:
<ul>
<li><a href="np.asp?ctNode=1885" title="本署簡介">本署簡介</a></li>
<li><a href="np.asp?ctNode=1886" title="施政計畫">施政計畫</a></li>
.....
.....
</ul>


css裡將a和li都設定成float:left;就可以了，其他css細節都和原來差不多。
把a設成float:left;有兩個好處，第一，不需要再設定display特性了，因為float已經是block level了，第二因為flaoat的特性使得a可以依照內容大小自動縮放寬或高。
而使用ul製作導覽列已符合無障礙網站規範，不需要再加間隔符號，我知道現在政府機關都需要製作符合無障礙規範的網站，所以這裡是一舉數得的技術。[/code]
發表人:  coolcd [ 2006-03-25, 14:50 ]
文章主題 : 
從語意上來看
的確是用 list 來做比較好
原來一直在想
怎麼讓 list items 像原來網頁一樣排列整齊

口口口口
口口口口
　口口口

li {display: table-cell} ?
直接在用 tr td?
每個 column 用 div 包起來？
後來看到你的回文才想到 我真笨
把 li 設定成 float 之後 變成 block-level 物件
直接設 width 就好了 :oops:
謝謝你的提點 :)
發表人:  不惑仔Boohover [ 2006-03-25, 15:33 ]
文章主題 :  不客氣，你太謙虛了
coolcd 寫:
後來看到你的回文才想到 我真笨
把 li 設定成 float 之後 變成 block-level 物件
直接設 width 就好了 :oops:
謝謝你的提點 :)


不客氣，你太謙虛了
實際上此用法好處多多，li裡的a也可以定義成display:block;，這是ie可以接受的。
發表人:  李某人 [ 2006-03-26, 00:11 ]
文章主題 : 
更正上面有人說到 display: inline-block 是 ie-only 的說法...

inline-block 是標準的 display property 的 value, 屬於 CSS2 的範圍...

http://www.w3.org/TR/CSS21/visuren.html#propdef-display
發表人:  coolcd [ 2006-03-26, 00:26 ]
文章主題 : 
李某人 寫:
更正上面有人說到 display: inline-block 是 ie-only 的說法...

inline-block 是標準的 display property 的 value, 屬於 CSS2 的範圍...

http://www.w3.org/TR/CSS21/visuren.html#propdef-display


真歹勢，查到 CSS 2.0 去了 ><"
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/