浏览器兼容性 - Chrome和FF的DIV不同

时间:2013-10-06 04:26:55

标签: html css google-chrome firefox compatibility

编辑:有人发布了答案但删除了答案。我很幸运地事先发现了它,它导致了一个修复。将{display:table-cell}添加到(.left)就可以了。谢谢陌生人!

第一次发表海报。使用JFDI方法在我的第一个站点上工作。请原谅任何snafus或strayings-from-the-norms。我希望很快就能在那里生活!

我使用Chrome和Espresso的预览作为视觉参考对此网站进行了编码。我即将完成,只是注意到其中一个DIV在FireFox中关闭了。

我做了一些搜索,看到这很常见。我尝试了一些快速修复,但我还没找到正确的修复方法。谢谢你的帮助!

Link to image. Chrome is on left, FireFox on right. The only issue is in the green. Anything else that looks off is just from the screenshot sizing.

我尝试过的事情:它不是导致它的社交导航按钮。我也尝试将DIV高度从基于百分比的更改为基于像素的。我试过“重置CSS”(不确定我做对了)。我尝试将整个文档的头部和身高设置为100%。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>ever's podcasts</title>
    </head>
        <body>
        <div id="header">
        <p class="head">
             .ever
        </p>
        </div>
        <div class="left">
            <p class="navtop">
            future house distillery hour
                <hr class="faded"/>
            <p class="navtop">
            desert sunrise sessions
                <hr class="faded"/>
            <p class="navtop">
            tc10
                <hr class="faded"/>
            <p class="navbottom">
                 <a href="https://twitter.com/TCannadySF"> 
                 <img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/twitter-bird-white.svg" class="navimages"></a>

                 <a href="https://soundcloud.com/ever"> 
                 <img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/soundcloud_logo_css_by_timpietrusky.jpg" class="navimages"></a>

                  <a href="http://www.linkedin.com/in/timcannady"> 
                 <img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/mnml-white-linkedin-icon-26240.png" class="navimages"></a>

                    <a href="http://wallpoper.com/images/00/37/45/87/eyes-illuminati_00374587.gif"> 
                 <img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/white-triangle-white-md1.png" class="navimages"></a>
        </div>
        <div class="right">
            <div class="set">
                <p>
                    <iframe width="90%" height="170px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F111659606&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>
                    <br>
                    <strong>DSS.1 september 20, 2013</strong>
                    <ol>
                        <li>Black is The Colour (Cumik's Edit) - Nina Nimone & LuLu Rogue</li>
                        <li>The Hope (Recondite's Nocturnal Car Ride) - Scuba</li>
                        <li>A Walk On The Clouds - Fabio Gianelli</li>
                        <li>When The Sun Goes Down - Alex Flatliner, Hermanez</li>
                        <li>Panta Rei (Max Cooper Remix) - Agoria</li>
                        <li>Miami's My Town - Jesse Perez</li>
                        <li>Slo-Mo Girl (Fur Coat Dark After Hour Mix) - Delete (aka Sergio Munoz)</li>
                        <li>Cleric - Recondite</li>
                        <li>Shake it Mama - Jupiter Jazz</li>
                        <li>Tears of a Clown (Ryan Davis Remix) - Pig&Dan</li>  
                        <li>Spiral Inflections - Max Cooper</li>
                        <li>Pleasures (Ghosting Season Remix) - Max Cooper, BRAIDS</li> 
                   </ol>
                   </p>
                   <p>
                    <iframe width="90%" height="166px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F105780607"></iframe>
                <br>
                <strong>FHDH.2 august 14, 2013  </strong>
                    <ol>
                        <li>Arahova - David Kassi</li>
                        <li>Love This Sound - Bryan Lead</li>
                        <li>Brotherman - Detroit Swindle</li>
                        <li>Serenade - Wally Lopez, Audio Junkies</li>
                        <li>No Equal Sides - Audiojack</li>
                        <li>I Need You - Leftwing, Kody</li>
                        <li>Get On Down (Roberto Rodriguez Remix) - Atnarko, Jevne</li>
                        <li>In Principal - Audiojack</li>
                        <li>I'm Into This - Homework</li>           
                   </ol>
                   </p>
                   <p>
                    <iframe width="90%" height="166px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67018569"></iframe>
            <br>
            <strong>FHDH.1 n    ovember 10, 2012</strong>
                <ol>
                    <li>Golden Bullet (Alvaro Hylander Remix) - Jean Jeak</li>
                    <li>Yesterday's Future Feat. Amy G (Evrey Ulusoy Perfect Present Remix) - Houseriders</li>
                    <li>Ol Times (Till Von Stein & Chopstick Remix) - Lihab, Findling</li>
                    <li>Policrom (Audiojack Remix) - NTFO, Audiojack</li>
                    <li>Another Boring Love Song (Alvaro Hylander Remix) - Seraphine</li>
                    <li>Go Down (Anton Pieete Remix) - Hermanez</li>
                    <li>Nobody Else - NTFO, Karmon</li>
                    <li>Almost Here Pt 1 - Pezzner</li>
                    <li>Keep On (Simon Baker's Keepin On Remix) - Marvin Zeyss</li> 
               </ol>
               </p>
                  </div>
            </div>
        <div id="footer"></div>
    </body>
</html>

CSS

  /*header div*/
#header{
    font-size: 45px; 
    font-family:  "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: #FFFFFF;
    padding-left: 20px;
    border-radius: 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #FF6600;
    width: 96.9%;
    height: 10%;
    margin: 10px;
    display: table;
}
/*for header copy*/
.head{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
/*right div*/   
.right{
    border-radius: 10px;
    border-top:13px solid #FF8000;
    border-bottom:13px solid #FF8000;
    background-color: #FF8000;
    width: 82%;
    height: 79.5%;
    float: right;
    right: 0;
    top: 75px;
    position: fixed;
    margin: 10px;
    margin-top: 18px;
    overflow: scroll;
}
/*formats right div's text*/
.set{
    font-size:11px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: #FFFFFF;
    padding-left: 25px;
}
/*left div*/
.left{
    border-radius: 10px;
    background-color: #FF8000;
    width: 13%;
    height: 83.5%;
    float: left;
    left:0px;
    top: 75px ;
    position: fixed;
    margin-left: 10px;
    margin-top: 18px;   
    display: table;
    padding: 15px;
    overflow: auto;
}
/*for left divs writing at the top*/
.navtop{
    font-size: 20px; 
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: #FFFFFF;
    display: table-cell;
    vertical-align: middle;
    display: block;
    text-align: center;
}
/*to get the left div social images to the bottom*/
.navbottom{
    bottom: 13px;
    position: fixed;
}
/*to set the left div social image sizes*/
.navimages{
    height: 20px;
    width: 20px;
}
/*to set header div text size*/
.headimages{
    height: 30px;
    width: 30px;
}
/*<hr> styling*/
hr.faded{
    border: 0;
    width:75%;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0)); 
    background-image:    -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0)); 
    background-image:     -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0)); 
    background-image:      -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0)); 
}

1 个答案:

答案 0 :(得分:0)

您正在使用<p class="navbottom">打开并以</div>

结束

编辑:您尚未关闭多个代码:这些代码都没有结束代码。

<p class="navtop">
            future house distillery hour
                <hr class="faded"/>
            <p class="navtop">
            desert sunrise sessions
                <hr class="faded"/>
            <p class="navtop">
            tc10
                <hr class="faded"/>
            <p class="navbottom">
<p class="navbottom">