1

我在 Firefox 中查看表格时遇到问题,想知道是否有人可以提供帮助?以下是我的页面在 Firefox 中的显示方式:

http://s15.postimg.org/sx6cn6ktn/Problem_Firefox.jpg

但在 Internet Explorer 中看起来不错:

http://s16.postimg.org/e96xsuwj9/Problem_IE.jpg

我的 HTML 编码如下:

<!DOCTYPE_HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="css.css">  
<title>Website Name | Album Name</title>

<body>
<div id="wrap">
<div id="logo"><img height="182.135433071px"; width="276.699212598px"; src="ctlogonew.jpg"></img> </div>
<div id="header"><img height="182.135433071px"; width="700px"; src="header1.png"</img>   </div>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#news">About</a></li>
    <li><a href="#Album Name">Album</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
   <hr>
    <!---HEADER ENDS HERE--->


    <h1>Welcome to Website</h1>
    <table border="1px" width="100%">
<col width="40">
<col width="60">
<tr>
    <td><img width="400px" src="homepic.jpg"></img></td>
    <td><p>Welcome to xxxxx - an indie-rock band from Norwich.</p><p> The band are known in the industry for creating great music, with all members, including xxxxxxxxxx having a passion for the genre. Formed in 2010, and based in Norwich, Norfolk, the band have increased massively in popularity since then, selling out all performances for their tour in 2012, with more scheduled for 2013, as well as developing a following in London and on the festival scene.</p><p>The band are known musically for their own brand of indie pop music, containing riffs, hooks and soaring choruses, which has seen them become an online sensation worldwide</p><p>Explore our website for our latest news, details of our latest album <strong><i>Album Name</strong></i>, and purchase merchandise from the store.</p><p> Fans can also explore our Facebook and Twitter profiles, and get in touch with us via the Contact Us page. </p></td>
</div>
</body>
</html>

我的 CSS 编码如下:

#wrap {
width:1000px;
height:1000px;
background-color:black;
margin: 0 auto;
}
#logo {
width:276.699212598px;
height:182.135433071px;
background-color:black;
align:left;
float:left;
margin-top:0px;
margin-left:5px;
margin-right:5px;
}
#header {
width:700px;
height:182.135433071px;
background-color:white;
float:right;
}
ul{
line-height:90px;
list-style-type:none;
text-align:center;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li{
display:inline;
}
a:link,a:visited {
font-family:Reprise Title, Gill Sans MT, Trebuchet MS, Sans-serif;
font-size:2em;
font-weight:bold;
border-radius:5px;
color:#000000;
background-color:#FFFFFF;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active {
background-color:#7A991A;
}


  {
  border:1px solid #0000ff;
}
div.desc {
text-align:center;
font-weight:normal;
width:120px;
 margin:2px;
}
hr {
height:4px;
background-color:white;
margin-left:20px;
margin-right:20px;
margin-bottom:30px;
}
/*HEADER ENDS HERE*/
h1 {
font-family:Reprise Title, Gill Sans MT, Trebuchet MS, Sans-serif;
font-size:2em;
color:#FFFFFF;
font-weight:bold;
margin-left:20px;
}
p {
font-family: Gill Sans MT, Trebuchet MS, Sans-Serif;
font-size: 1em;
color: #FFFFFF;
}


table {
font-family: Gill Sans MT, Sans-Serif;
color: #FFFFFF;
padding: 3px;
}

任何帮助是极大的赞赏!!

非常感谢。

4

2 回答 2

0

为 colgroup 中的值添加一个单位。似乎对我有用你的代码。

列宽=“40%”

列宽=“60%”

于 2013-11-08T16:36:30.930 回答
0

的HTML:

  • 正如评论中所说,您的 DOCTYPE 拼写错误,导致文档进入 Quirks 模式。而且不同的浏览器有不同的怪癖,所以如果你追求浏览器的互操作性,就不要使用它。
  • 这些天来,用小写写标签名称是一种很好的做法,<html>而不是<HTML>. 当然,您可以随心所欲地编写它们;只要保持一致。
  • 缺少结束标记,</head>但这也不是错误。这些天不建议这样做。我的意思是,忽略该标签所做的只是节省 8 或 9 个字节。
  • 您的图像的宽度和高度属性有错误。那些应该只包含整数。此外,谁听说过 182.13 像素高的图像?
  • img 标签中的那些分号是不好的。摆脱他们。
  • 第二个 img 也缺少一个>.
  • 没有</img>结束标签这样的东西。
  • 您的 imgs 没有 alt 属性。
  • 您的评论有奇数个破折号。理顺那些。
  • 在表中,width 属性再次关闭。真的,你应该阅读你的 CSS。如今,所有这些宽度和高度属性都没有用。
  • <i>和的结束标签<strong>是错误的。此外,您的意思是<cite>,不是<i><strong>
  • 缺少</table>结束标记。

CSS:

  • align不是样式属性。
  • 你不清除你的花车。养成经常清理花车的习惯。
  • 始终在字体系列名称周围加上引号是个好主意,尤其是当它们包含空格时。
  • 有一个没有选择器的样式规则。

如果您纠正了所有这些错误,您的网站很可能在浏览器中看起来更加相似。

于 2013-11-25T21:10:38.363 回答