Chrome与Safari中不同的HTML布局

Question

I'm trying to build a website to showcase photography, and the images are arranged in a grid. The grid looks perfect on Safari, but on Chrome and even Firefox the grid is all messed up. Also, my "logo" image, that had an id of logo , doesn't display on these two browsers, even after copying it's path.

I also have a modal with an id of bg that is hidden by default (JQuery .hide() ).

HTML:

<div id="container_nav">

    <div id="nav">

        <!-- <a href="dirtygrid_html.html"> --><img id="logo" src="file:///Users/Pablo/Desktop/DirtyGrid/logo.jpg"><!-- </a> -->
        <span id="contact">CONNECT</span>

    </div>

</div>

<div id="container_canvas">

    <div id="canvas">

        <img id="imgbig" alt="New York by air" src="pictures/IMG_1148 copy.jpg">

        <img id="imgR1" src="pictures/IMG_4970 copy.jpg">
        <img id="imgR2" src="pictures/IMG_5331.jpg">            
        <img id="imgR3" src="pictures/IMG_0255 copy.jpg">

        <img id="imgR1" src="pictures/IMG_0381 copy.jpg">
        <img id="imgR2" src="pictures/IMG_4897 copy.jpg"> 
        <img id="imgR3" src="pictures/IMG_0011 copy.jpg">


        <img id="imglong" src="pictures/IMG_0134-Edit-2 copy.jpg">


        <img id="imgL1" src="pictures/IMG_5507 copy.jpg">           
        <img id="imgL2" src="pictures/IMG_4823 copy.jpg">
        <img id="imgL3" src="pictures/IMG_5096 copy.jpg">

        <img id="imgbig2" src="pictures/IMG_1245 copy.jpg">

        <img id="imgL1" src="pictures/IMG_4862 copy.jpg">
        <img id="imgL2" src="pictures/IMG_1226 copy.jpg">
        <img id="imgL3" src="pictures/IMG_1749 copy.jpg">

    </div>

</div>

<div id="bg">

    <div id="modal">

        <span id="title"><h2>Send me a message!</h2></span></br>
        <span id="name">Name</span></br>
        <input id="fname" type="text" placeholder="First Name">
        <input id="lname" type="text" placeholder="Last Name"></br></br></br>

        <span id="countryTitle">Where are you from?</span></br>
        <input id="country" type="text" placeholder="China, France, Canda, Hong Kong..."></input>

        <span id="messageTitle">Message</span>
        <textarea id="message" placeholder="Your message here">      </textarea>

        <button id="submit">Submit</button>

    </div>
</div>

CSS:

#container_nav{
width: 40%;
height: 100px;
margin: 15px auto 15px auto;
z-index: 1;
position: absolute;
left: 0;
right: 0;
}

#nav{
height: 100%;
width: 100%;
}

#logo{
margin-left: 30px;
height: 65px;
cursor: pointer;
float: left;
margin-top: 17.5px;
z-index: 0;
position: relative;
}

#contact{
float: right;
font-size: 20px;
line-height: 100px;
margin-right: 30px;
cursor: pointer;
font-family: 'Raleway', sans-serif;
font-weight: 100;
}

#container_canvas{
width: 40%;
height: 100%;
top: 0px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}

#canvas{
width: 100%;
height: 100%;
margin-top: 130px;
}

img{
z-index: 0;
}


#imgR1, #imgR2, #imgR3{
width: 19.6%;
padding: 0px;
float: left;
margin-bottom: 0.7%;
}

#imgbig{
width: 39.7%;
margin-right: 0.5%;
margin-bottom: 0.7%;
padding: 0px;
float: left;
}

#imgbig2{
width: 39.7%;
margin-right: 0%;
margin-bottom: 0.7%;
padding: 0px;
float: right;
}

#imgR1, #imgR2{
margin-right: 0.5%;
}

#imgR3{
margin-right: 0%;
}

#imgL1, #imgL2, #imgL3, #imgL4{
margin-right: 0.5%;
width: 19.6%;
float: left;
margin-bottom: 0.7%;
}

#imgL5{
margin-right: 0%;
margin-bottom: 0.7%;
float: left;
width: 19.6%;
}

#imglong{
width: 100%;
margin-right: 0%;
padding: 0px;
height: auto;
float: left;
margin-bottom: 0.7%;
}

#bg{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
z-index: 100;
float: center;
}

#modal{
height: 680px;
width: 800px;
background-color: white;
border-radius: 5px;
margin-top: -390px;
margin-right: auto;
margin-left: auto;
top: 50%;
position: absolute;
left: 0;
right: 0;
padding: 50px 100px 50px 100px;
z-index: 1;
}

Any help is appreciated, it's been driving me nuts!

Answer 1

If you're trying to implement a grid, rather than using floats and all these hard values, I'd take a look at CSS3's new display: flex , or at the very least, inline-block .

Here's a quick codepen I whipped together demonstrating a flex based grid.

Note: While that grid should work on all newer browsers, some prefixes may be required for older browsers.