Question

我在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;
}

非常感谢任何帮助!!

非常感谢。

Answer 1

将单位添加到colgroup中的值。似乎对我的代码有用。

col width =“40％”

col width =“60％”

Answer 2

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不是样式属性。
你不清楚浮子。养成永远清理花车的习惯。
总是在字体系列名称周围添加引号是个好主意，特别是如果它们包含空格。
有一种没有选择器的样式规则。

如果您更正了所有这些错误，那么您的网站可能会在浏览器中看起来更相似。

HTML表＆amp;图像问题 - Firefox

2 个答案: