div与背景颜色，半透明度和边框有不可见的边框？

Question

我有一些div像这样：

• 第二div有，高亮
• 第三div有类框架
• 第四div有两个，高亮和框架类。

为什么边界在第四种情况下消失？

http://jsfiddle.net/ycyrwgcz/3/

HTML

<table> 
    <tr> 
     <td> 
      <div class="thumb"><div class="overlay"></div></div> 
     </td> 
     <td> 
      + 
     </td> 
     <td> 
      <div class="highlit thumb"><div class="overlay"></div></div> 
     </td> 
     <td> 
      + 
     </td> 
     <td> 
      <div class="framed thumb"><div class="overlay"></div></div> 
     </td> 
     <td> 
      = 
     </td> 
     <td> 
      <div class="highlit framed thumb"><div class="overlay"></div></div> 
     </td> 
    </tr> 
</table> 

与CSS

body 
{ 
    background-color: #ff8888; 
} 

.thumb 
{ 
    width: 40px; 
    height: 40px; 
    display: inline-block; 
    margin: 10px; 
    background-color: #8888ff; 
} 

.overlay 
{ 
    height: 100%; 
} 

.thumb.framed .overlay 
{ 
    border: 2px solid #fff; 
    box-sizing: border-box; 
} 

.thumb.highlit .overlay 
{ 
    background-color: #fff; 
    opacity: 0.4; 
} 

Answer 1

这些都是你的CSS规则：

.thumb.highlit .overlay { 
    background-color: #FFF; 
    opacity: 0.4; 
} 
.thumb.framed .overlay { 
    box-sizing: border-box; 
    border: 2px solid #FFF; 
} 

现在，对于第4个<div>上述两种风格混淆起来。意思是，有background-color: #fff以及border: 2px solid #fff。

正如你所看到的，这些都是白色的。正因为如此，你无法区分边界。

尝试更改上述任何一个规则的color，您将获得解决方案。

希望这会有所帮助。 :)

Answer 2

试试这个：

body 
{ 
    background-color: #ff8888; 
} 

.thumb 
{ 
    width: 40px; 
    height: 40px; 
    display: inline-block; 
    margin: 10px; 
    background-color: #8888ff; 
} 

.overlay 
{ 
    height: 100%; 
} 

.thumb.framed 
{ 
    border: 2px solid #fff; 
    box-sizing: border-box; 
} 

.thumb.framed .overlay 
{ 
    box-sizing: border-box; 
} 

.thumb.highlit .overlay 
{ 
    background-color: #fff; 
    opacity: 0.4; 
} 

Answer 3

因为background-color和border-color是相同的（#fff）在第四个div。
您正在使用.overlay类有以下几点：

.thumb.highlit .overlay { 
    background-color: #fff; 
    opacity: 0.4; 
} 
.thumb.framed .overlay { 
    border: 2px solid #fff; 
    box-sizing: border-box; 
} 

Answer 4

你要这个，应该是自我解释;）

.thumb.highlit .overlay { 
    background-color: rgba(255,255,255,0.4); 
} 

http://jsfiddle.net/fxxf6kcs/1/

Answer 5

它不消失 - 只是在混合与覆盖层的其余部分相同，因为您已将其设置为不透明，则会变成紫色。如果你只想要的背景是不透明的，而不是整个覆盖，你将需要使用RGBA背景颜色：

.thumb.highlit .overlay 
{ 
    background-color: rgba(255,255,255,0.4); 
} 

Example

This should work back to ie 8