1

我正在尝试为该站点修复我的网页，如果您要访问，您会看到在 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>
4

4 回答 4

1

添加<svg style="width: 100%;">而不是<svg>

于 2013-06-20T21:16:20.507 回答
1

规范说width应该默认为，但无论出于何种原因，100%在 FireFox 中似乎并非如此。

尝试使用

<svg width="100%">

用 firebug 设置它可以让我在 FireFox 中看起来正确。请注意，这与style="width: 100%;"

MDN对默认宽度的说法相同，因此这可能是 Firefox 的错误

于 2013-06-20T21:16:59.430 回答
1

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

#header svg {
    width:100%;
}

但为什么不改成一个background-image呢？或者使用渐变生成器并使用 CSS 来完成？ http://www.colorzilla.com/gradient-editor/

于 2013-06-20T21:17:11.407 回答
0

将此添加到 css 中：

 #header{width: 85%;}
于 2013-06-20T21:21:30.297 回答