设置仅在 Firefox 中查看的图像的高度和宽度答案

【问题标题】：Setting height and width of image to be viewed in firefox only设置仅在 Firefox 中查看的图像的高度和宽度
【发布时间】：2014-06-30 04:45:35
【问题描述】：

我正在为网站制作流畅的布局。当我在 Safari 或 Chrome 上查看时，网站主页上的所有元素看起来都是正确的，但是当我尝试在 FireFox 上查看时，徽标和徽标的容器变得非常大，并且占用的空间比我拥有的更多为它设置。这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/stylesheetHome.css" />
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
        <div id="logoBlock" class= "grid_4">
            <img width=100px src="../img/IshiharaPlate3.svg" alt="Logo"  />
        </div>


            <div id="navigation" class="grid_8 omega">
                <ul id="navList">
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../index.html" id="homeNav">Home</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle" >
                            <a  class= "round-button" href="../html/gamesPageTemporary.html" id="gamesNav">Games</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
                        </div></div>
                    </li>                   
                </ul>
            </div>

        <div id="section1" class="grid_10">
                <div id="sizzle" class="grid_8">
                    <object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&amp;version=3&amp;rel=0""></param><param name="allowFullScreen" value="true"></param>
                    <param name="allowscriptaccess" value="always"></param>
                    <embed src="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&amp;version=3&amp;rel=0"" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

                    <!--<iframe width="620" height="345"
                        src="http://www.youtube.com/embed/XGSy3_Czz8k">
                    </iframe>-->
                </div>
        </div>

        <div id="section2" class="grid_5">
            <div id="portrait" class="grid_3">
                <img width=300px src="../img/IshiharaPlate3.svg" />
            </div>
        </div>      

        <div id="section3" class="grid_5 omega">
            <h2>About me</h2>
            <p>Video games as a medium is the most amazing creative outlet for me and I am working hard to do it for a living.  Scripting is my specialty, but I enjoy working on every part of a game(VFX are especially fun). I have a wide variety of experience from working at Oak Ridge National Lab on a game environment for GIST analysts to use to making a mobile game about catching birds while falling through the sky. I love all types of games and I am always trying to improve upon what I have learned so that I can make new and exciting games.</p>
        </div>
        <div id="contact" class="grid_4">
            <p><span>Michael Agreda &copy 2014</span></p>
        </div>      

    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    <script src="../jquery.fitvids.js"></script>        
      <script>
      // Target your .container, .wrapper, .post, etc.
      $("#sizzle").fitVids();
    </script>   
    <body id="home">    
</body>
    </html>

这是我的 CSS：

/*global*/

body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #333;
width: 100%;
  }

 a {
color: #4fb69f;
text-decoration: none;
 }



/*typography*/

h1 {
    font-size: 1.750em;
    font-weight: 100;
    letter-spacing: -1.5px;
}

h2 {
    font-weight: 100;
    font-size: 1.500em;
    font-size: 2.5vw;
    color: #b4c34f;
}
h3 {
    font-weight: 100;
    font-size: 1.125em;
    color: #ed6c85;
}

#logoBlock{
position: relative;
    margin: 0;
    padding-top: 1%;
    padding-bottom: 1%;
    top: 0;
    background-color: #420600;  
    width: 100%;
    height: 5%; 
}

/*#logoBlock h1 {
    color: #FFF;
    text-align: center;
    top: 20px;
}*/

#logoBlock img {
    width: 100%;
    height: 10%;
    left: 70%;
}

#navigation{
    position: relative;
    width: 80%;
    height: 15%;
    left: 10%;
    background-color: #008080;
}

#navigation ul{
    list-style-type:none;
    margin: 0 auto;
    width: 100%;
    height: 25%;
    margin-left: 12%;

}

#navigation li {
    display:inline;
    float: left;
    padding: 1%;
    width: 15%;
}

.round-button {
    width:85%;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #ff8080;
    overflow:hidden;

    background: #c83737; 
    box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#F5F5DC;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}
/*
.home {
  padding:0.5%;
  font-size: 28px;
  color: yellow;
  position: relative;
  bottom: -2%;
  text-decoration:none;
  text-align:center;
}



#egg2 {
    width: 45%;
    height:20%;
    padding-bottom: 35%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #008080;
}

.games {
  padding:0.5%;
  font-size: 28px;
  color: yellow;
  position: relative;
  bottom: -2%;
  text-decoration:none;
  text-align:center;
}


#egg3 {
    width: 45%;
    height:20%;
    padding-bottom: 35%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #008080;
}

.resume {
  padding:0.5%;
  font-size: 28px;
  color: yellow;
  position: relative;
  bottom: -2%;
  text-decoration:none;
  text-align:center;
}


#egg4 {
    width: 45%;
    height:20%;
    padding-bottom: 35%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #008080;
}

.contact {
  padding:0.5%;
  font-size: 28px;
  color: yellow;
  position: relative;
  bottom: -2%;
  text-decoration:none;
  text-align:center;
}

*/
#section1 {
    position: relative;
    height: 40%;
    width: 100%;
}

#section 1  h1 {
    height: 2%;
    width: 2%;
    left: 5%;
    color: #FFF
}

#sizzle {
    position: relative;
    left: 17%;
    top:-10%;
}

#section2 {
    position: relative;
    top: 45%;
    height: 20%;
    width: 30%;
}

#portrait {
    position: relative;
    height: 30%;
    width:30%;
    left: 10%;
}

#section3 {
    top: 40%;
    }

#contact {
    height: 10%;
    width: 100%;
    background-color: "blue"; 
}   

body#home .round-button a#homeNav,
body#games .round-button a#gamesNav,
body#resume .round-button a#resumeNav,
body#contact .round-button a#contactNav {
background: #30588e;
}

如何让布局在 Firefox 中正确显示？

【问题讨论】：

谢谢雷姆斯和理查德！不过，我有一个简单的问题，如果我想将徽标放在 logoBlock 的中心，我该怎么做？

标签： html css firefox web fluid-layout

【解决方案1】：

尝试在img标签的100px周围加上双引号，去掉px：

<div id="logoBlock" class= "grid_4">
    <img width="100" src="../img/IshiharaPlate3.svg" alt="Logo"  />
</div>

编辑：谢谢@RichardB

【讨论】：

我删除了我的评论，因为当我在评论后测试它时，它实际上似乎与 px 一起工作！不确定这是否只是一种很好的错误处理方式，或者现在是一种同样正确的方法。
我也没有！我还是根据您之前的评论更正了我的答案，所以它更“真实”。

【解决方案2】：

块和图像的宽度都设置为 100%，并填满浏览器窗口的整个宽度。

您的内联样式表示您希望徽标为 100 像素。

如果是这样，那就改变

#logoBlock img {
    width: 100%;

到

#logoBlock img {
    width: 100px;

如果它的尺寸应该更具响应性，那么您可能需要查看 max-width，它允许它仅扩展至指定点。

至于为什么它在 Chrome 中工作 - 我的猜测是他们选择了内联样式而不是 css 样式（还应该应用 Rems 代码修复）。

【讨论】：