作者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