Question

我正在学习基本的CSS，我正在尝试创建一个使用4列网格系统的小型模型产品页面。它看起来和Chrome上的工作正常，但在Firefox上它会像这样打破。这是它在Firefox上的样子：

我似乎无法弄清楚如何解决它，我已经尝试从各个位置更改边距/填充但无济于事，它仍然在搞乱Firefox。

这是我的CSS：

html {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    background: #232526; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
* {
    box-sizing: border-box;
}
.menu {
    background-color: #17534b;
    position: absolute;
    width: 99.23%;
    height: 8vh;
}

ul.nav {
    width: 100%;
}

ul.nav li {
    list-style: none outside none;
    display: inline-block;
    width: 19%;
    text-align: center;
}

ul.nav li a {
    display: block;
    text-align: center;
    padding: 1.5em;
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
}
ul.nav li a:hover {
    background-color: #000000;
    color: white;
}
ul.nav li.li-ultimate{
    text-transform: uppercase;
    color: #eef2ff;
    font-size: 25px;
}

section {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: none;
    height: 100vh;
}

.welcome {
    height: 100vh;
    background-color: #ffffff;
}

.content {
    display: table-cell;
    vertical-align: middle;
}

.welcome h1{
    font-size: 3em;
    display: block;
    color: black;
    font-weight: 300;
}

.welcome h2 {
    font-size: 1.5em;
    display: block;
    color: black;
    font-weight: 200;
}

.productsheader {
    color: #ffffff;
}
.productsheader h1{
    text-align: center;
    color: #ffffff;
    font-size: 3em;
}

.products{
    height:100vh;
}
ul.rig {
    padding: 5%;
    list-style: none;
    font-size: 0px;
    margin-left: -2.5%;
}

ul.rig li {
    display: inline-block;
    padding: 10px;
    margin: 0 0 2.5% 2.5%;
    background: #ffffff;
    border: 1px solid #ddd;
    font-size: 16px;
    vertical-align: top;
    box-shadow: 0 0 5px #ddd;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

ul.rig li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}

ul.rig li h3 {
    margin: 0 0 5px;
    text-align: center;
}

ul.rig li p {
    font-size: .9em;
    line-height: 1.5em;
    color: #999;
    text-align: center;
}

ul.rig.columns-4 li {
    width: 22.5%;
}

连同相关的HTML：

<section class="products">
    <div class="content">
        <div class="productsheader">
            <h1>
                Our Proudly Presented Products
            </h1>
        </div>
        <ul class="rig columns-4">
            <li>
                <img src="images/1.jpg"/>
                <h3>Is-it-even-a-cup Cup - $100</h3>
                <p>Life's true questions.</p>
            </li>
            <li>
                <img src="images/2.jpg"/>
                <h3>Flute Looking Cup - $150</h3>
                <p>Looks like a flute.</p>
            </li>
            <li>
                <img src="images/3.jpg"/>
                <h3>Uterus Looking Cup - $350</h3>
                <p>Modelled after a woman's uterus. Probably.</p>
            </li>
            <li>
                <img src="images/4.jpg"/>
                <h3>Artistic Cup - $1</h3>
                <p>Artsy...ish...</p>
            </li>
            <li>
                <img src="images/5.jpeg"/>
                <h3>Ancient Cup - $500</h3>
                <p>Or at least we think its old. Sure does look it.</p>
            </li>
            <li>
                <img src="images/6.jpg"/>
                <h3>Chinese Poetic Cup - $250</h3>
                <p>The cup feels empty when you drink, but you're empty when you don't.</p>
            </li>
            <li>
                <img src="images/7.jpg"/>
                <h3>Dragonfly Cup - $25</h3>
                <p>Pretty little dragonfly...On a cup.</p>
            </li>
            <li>
                <img src="images/8.png"/>
                <h3>FIFA World Cup Brazil - $50</h3>
                <p>Technically a cup...</p>
            </li>
        </ul>
    </div>
</section>

在我处理另一个css项目时，是否有任何提示可以防止将来发生这种情况？

Answer 1

ul.rig {
  padding: 5%;
  list-style: none;
  font-size: 0px;
  margin-left: -2.5%;
  width: 960px; // choose your width like 960px
  margin: auto; // auto work with display : block for centering
  display: block; // block work with margin : auto for centering
}

边距在chrome上工作正常但在firefox上没有

1 个答案: