Question

我正在尝试为此site修复我的网页，如果您要访问，您会看到在Firefox中它没有正确显示标题栏但在Chrome中它会显示。我不懂为什么。我的研究表明，如果Firefox在页面上发现错误，它会加载并显示其余内容。但是，我似乎无法在任何地方找到错误。谢谢你的帮助。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bond Solutions | Home</title>
<style type="text/css">
body {
    background-color: #000;
}
#footer {
    width: 75%;
}
#copyright img {
    width: auto\9;
    max-width: 100%;
    float: left;
}
#copyright {
    color: #FFF;
    float: left;
}
#header {
    width: 75%;
    height: 84px;
}
#header h3 {
position: absolute;
top: 4%;
left: 15%;
}
#header a {
    color: black;
}
</style>
<script type="text/javascript">
var video;
window.onload = function () {
window.video = document.getElementById("video");
window.video.addEventListener('ended',myHandler,false);
window.video.volume=0.5;
}
function myHandler() {
        window.video.currentTime = 7;
        window.video.volume=0;
        window.video.play();
}
</script>
</head>

<body>
<center>
<div id="header">
<svg>

<defs>
<linearGradient id="menugrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(94,94,94);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(137,137,137);stop-opacity:1" />
</linearGradient>
</defs>

<rect width="100%" height="84" x="0" y="0" style="fill:url(#menugrad);" />
</svg>
<h3><a href="http://www.bondsolutionsnj.com">Home |</a><a href="http://www.bondsolutionsnj.com/graphicdesign.html"> Graphic Design |</a><a href="http://www.bondsolutionsnj.com/webdesign.html"> Web Design |</a><a href="http://www.bondsolutionsnj.com/marketing.html"> Marketing |</a> <a href="http://www.bondsolutionsnj.com/computercasemods.html"> Computer Case Mods |</a> <a href="http://www.bondsolutionsnj.com/computerbuilds.html"> Computer Builds |</a> <a href="http://www.bondsolutionsnj.com/socialnetworks.html"> Social Networks |</a> <a href="http://www.bondsolutionsnj.com/contact.html"> Contact</a></h3>
</div>
</center>
<center>
<div id="content">
<video controls="controls" id="video" autoplay="true" width="50%" height="50%" onEnded="restart()">
<source src="Intro.mp4" type="video/mp4">
<source src="Intro.ogg" type="video/ogg">
</video>
</div>
</center>
<center>
<div id="footer">
<hr />
<div id="copyright">
<a href="http://www.fatcow.com/green-certified/bondsolutionsnj.com" onClick="MyWindow=window.open('http://www.fatcow.com/green-certified/bondsolutionsnj.com','greenCertified','toolb ar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=550,height=700,left=50,top=50'); return false;"><img src="http://www.fatcow.com/green-certified/hosting-badge-2.png" border="0" /></a>Copyright: <strong>©</strong> Bond Solutions LLC
</div>
</div>
</center>
</body>
</html>

Answer 1

添加<svg style="width: 100%;">代替<svg>

Answer 2

specifications表示width应该默认为100%，但无论出于何种原因，FireFox似乎都不是这样。

尝试使用

<svg width="100%">

使用firebug进行设置使其在FireFox中看起来正确。请注意，这与style="width: 100%;"

的效果不同

MDN对默认宽度说了同样的话，所以这可能是Firefox的错误

Answer 3

您是否尝试使svg与标题的宽度相同？

#header svg {
    width:100%;
}

但为什么不把它变成background-image呢？或者使用渐变生成器并使用CSS执行此操作？ http://www.colorzilla.com/gradient-editor/

Answer 4

将此添加到css：

 #header{width: 85%;}

HTML5 / CSS页面在Chrome中显示正确，但在Firefox中不显示

4 个答案: