作者elan (me so f**ked up!)
看板Web_Design
標題Re: [問題] css firefox,ie顯示不同
時間Thu Sep 7 12:42:02 2006
: 網址:http://www.ee.ntu.edu.tw/eeoffice/tmp.php
: IE: http://www2.ee.ntu.edu.tw/~b9901117/tmp1.jpg
: firefox: http://www2.ee.ntu.edu.tw/~b9901117/tmp2.jpg
: css如下:
: .iBtn a:link{
: color: #001EFF; font-size:9pt; letter-spacing: 1px; text-decoration:none;
: padding: 0px !important; padding-top: 8px; width: 160px; height: 28px;
: background-image: url(../../image/stu_image/iBtn.gif);
: background-repeat: no-repeat; margin: 0 auto;}
: .Btn a:visited{除了顏色以外同上}
: .Btn a:hovor{除了顏色以外同上}
: html:
: <td valign="top" align="center" width="160" height="28" class="iBtn">
: <a href="index_stu.php?cat=news_stu"> 最新消息 </a></td>
: ====
: 測試結果,css內的 width: 160px; height: 28px在firefox內沒有作用,
: button的背景圖只貼在有連結字後面,沒辦法攤開成160*28
: ====
兩個原因:
第一, inline元素(<a>, <span>, ...)是無法設定dimensions, 所以在標準瀏覽器上你
設定的width和height並不會生效, 這就是為什麼你說的在firefox上沒有作用,
正如版友bcse說的, 必須在 .Btn a:link 裡設定 display: block;
為什麼用IE就可以? 那是IE6之前的瀏覽器的錯誤implementations, 但我相信你應該是用
IE6在看, 那為何又沒錯誤? 那是因為你正以quirks mode來呈現你的網頁, 這時IE6會以
早期版本的模式來呈現. (你的DOCTYPE宣告少了DTD URL, 把你的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
改成
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
就能讓IE6轉到標準模式, 這時你應該會發現你設定的width和height在IE上也失效了)
第二, 你的外部樣式表eepffice_css.css竟然是寫成:
<style type="text/css"><!--
[css定義]
--></style>
<style>是HTML/XHTML的語法, 是用來寫embedded的樣式, 外部樣式表不應該出現
至於<!--和-->這些entity我無法法理解是怎麼跑出來的, 因該是你的編輯器
將<!--和-->轉換過來的, 反正把它們拿掉, 因為這些不符合css文法的字造成了
瀏覽器的parsing error, 使你的第一個css定義完全消失(不管IE或Fx上都一樣)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.131.19.3
1F：推 Tonnny:大感謝 <(_ _)> 學到很多 Thanks~ 09/07 13:38