HTML5/CSS Page displays correct in Chrome but not in Firefox
Question
I am trying to fix up my webpage for this site and if you were to visit you would see that in Firefox it does not display the header bar correctly but in Chrome it does. I do not understand why. My research shows that if Firefox finds an error on the page it screws up loading and displaying the rest of it. However, I can't seem to find an error anywhere. Thanks for any help.
<!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 answers
solution1
1 2013-06-20 21:16:20
添加<svg style="width: 100%;">而不是<svg>
solution2
1 ACCPTED 2013-06-20 21:16:59
The specifications say that width should default to 100% , but for whatever reason that doesn't seem to be the case in FireFox.
Try using
<svg width="100%">
Setting that with firebug makes it look correct to me in FireFox. Note that this does not have the same effect as style="width: 100%;"
MDN 's says the same thing about the default width, so this may be a bug with Firefox
solution3
1 2013-06-20 21:17:11
Are you trying to make the svg the same width as the header?
#header svg {
width:100%;
}
But why not make it a background-image instead? Or use a gradient generator and do it with CSS? http://www.colorzilla.com/gradient-editor/
solution4
0 2013-06-20 21:21:30
将此添加到css：
#header{width: 85%;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.