Question

我与我的安保部和IE9一起经历一个非常令人沮丧的问题,甚至可能在MacOS。

我有四张图像,载于一个集装箱编号序列{width:960px}。

每一成像(li)均载于一个箱子:catBox{width: 220px;浮动:左边;边:20px 25px 10px 0px}。

我在最后图像上删除了右边,用.Box:last-child{margin-right: 0px;}。

基本上,我试图做的是,在960px码头集装箱中,有四种图像是正当的。这使 Chrome莎、FF和IE9在我的当地计算机、 Chrome莎和FF的微额工作与我的Windows机器相距甚远。

在我远距离测试时,它将最后的形象推向下线。 ALSO,在麦加测试时,情况相同。

这里是我的数学:220px * 4 图像=880px. 3 差额(最后一次删除)为25px=75px.75 + 880 = 955px。这应当给我一个五倍的“bu”。谁能提供帮助? 我对这一错误的思考?

事先感谢您的帮助。

传真

<div id="categories">
<ul>
<li class="catBox"><img src="img/3mmwpolytongue22mm.jpg" alt=""><div class="caption"><h2>Stone</h2></div> 
</li>
<li class="catBox"><img src="img/4g5.5m12ws.JPG" alt=""><div class="caption"><h2>Wood</h2></div></li>
<li class="catBox"><img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt=""><div class="caption"><h2>Teflon & Polymer</h2></div></li>
<li class="catBox"><img src="img/13mmblueindianearrings1.jpg" alt=""><div class="caption"><h2>Custom</h2></div></li>
</ul>
</div>

CSS

#categories {
    width: 960px;
    height: 240px;
}

.catBox {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

.catBox:last-child {
    margin-right: 0px;
}

.caption {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
}

.caption h2 {
    color: #fff;
}

Answer 1

拆除两岸之间的所有白色空间。它可以干预六氯乙烯纤维布局。

Answer 2

我看不到任何问题。你们应该用刀子来做白色空间,不要使用空间钥匙。在这里,你们有JSFiddle,在FF、Kook和Sato测试。

http://jsfiddle.net/PwkAW/。

Answer 3

我不确切地说,你为什么会看到你所描述的行为,你们是否知道,在遥远的服务器上,你的所有国际空间站完全相同? 如果我不得不猜测,还有另一项规则正在影响你的利益。您能否分享远程服务器链接?

此外,你的标记和特别安全局也可大大简化。我不说,它将确定你所看到的内容,但至少会消除局势中的一些变数。您可以:

<ul id="categories">
  <li>
     <img src="img/3mmwpolytongue22mm.jpg" alt="" />
      <h2>Stone</h2> 
  </li>
  <li>
      <img src="img/4g5.5m12ws.JPG" alt="" />
      <h2>Wood</h2>
  </li>
  <li>
      <img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt="" />
      <h2>Teflon & Polymer</h2>
  </li>
  <li>
      <img src="img/13mmblueindianearrings1.jpg" alt="">
      <h2>Custom</h2>
  </li>
 </ul>

之后,你们的社会保障局可以考虑:

#categories {
width: 960px;
height: 240px;
}

#categories li {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

#categories li:last-child {
    margin-right: 0px;
}

#categories h2 {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
    color: #fff;
}

实际上,在支持中央支助事务时,Idid 通知问题——本条规则:

catBox:last-child

你们不会去做。最后一项儿童规则,至少从我的经验来看,在作为选择人的一部分适用于班级时,并不奏效。这似乎只是简单化的内容——例如:最后孩子。因此,它可能不会像你所期望的那样取消右边。

友情链接