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的网格。

注意：虽然该网格应该适用于所有较新的浏览器，但旧浏览器可能需要一些前缀。

Chrome中的HTML布局与Safari不同

1 个答案: