Chrome中的不同的HTML佈局比Safari

Question

我試圖建立一個網站來展示攝影，並且圖像被安排在網格中。該網格在Safari上看起來很完美，但在Chrome甚至Firefox上，網格都是混亂的。此外，我的「徽標」圖像（ID爲logo）在這兩個瀏覽器上都不顯示，即使在複製路徑後也是如此。

我也有一個默認隱藏的ID爲bg的模式（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; 
} 

任何幫助表示讚賞，它一直推動我瘋了！

Answer 1

如果你想實現一個網格，而不是使用浮點數和所有這些硬性值，我會看看CSS3的新display: flex，或至少inline-block。

下面是一個快速的codepen我鞭打在一起展示了基於flex的網格。

注意：雖然該網格可以在所有較新的瀏覽器上運行，但舊版瀏覽器可能需要某些前綴。