个人中心
gpt4 book ai didi

html - 设置图像的高度和宽度仅在 firefox 中查看

转载 作者：行者123 更新时间：2023-11-28 10:08:05 24 4
gpt4 key购买 nike

我正在为网站制作流畅的布局。当我在 Safari 或 Chrome 上查看时，网站主页上的所有元素看起来都是正确的，但是当我尝试在 FireFox 上查看时， Logo 和 Logo 的容器变得非常大，占用的空间比我拥有的更多为它设置。这是我的 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 中正确显示？

最佳答案

尝试在 img 标签的 100px 周围加上双引号并删除 px:

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

编辑:谢谢@RichardB

关于html - 设置图像的高度和宽度仅在 firefox 中查看，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24479412/

24 4 0
文章推荐： css - 如何使用 LESS 嵌套变量
文章推荐： javascript - 如果选择了某个下拉列表，则添加文本字段
文章推荐： css - w3.org 作者如何转换高度的视角来测量 CSS 像素引用的尺寸？
文章推荐： jquery - 切换表 - 增加行跨度以容纳额外的切换行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com