Различные HTML-макеты в Chrome, чем Safari

Question

Я пытаюсь создать веб-сайт для демонстрации фотографии, а изображения расположены в сетке. Сетка отлично смотрится на Safari, но в Chrome и даже в Firefox сетка все испортилась. Кроме того, мое изображение «логотип», имеющее идентификатор logo, не отображается в этих двух браузерах, даже после копирования его пути.

У меня также есть модальный код с идентификатором 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 Я взбитые вместе, демонстрируя сетку, основанную на гибких связках.

Примечание. Хотя эта сетка должна работать на всех более новых браузерах, некоторые префиксы могут потребоваться для старых браузеров.