使用:用firefox之后

时间:2013-06-27 06:34:58

标签: css firefox

chrome和ie10的结果是可行的,但在firefox上无效。

我想在div底部添加阴影背景

请看一下

http://jsfiddle.net/yokosatan/mv83a/

这是HTML的代码

<div class="box">
   <div class="logo">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
   </div>
   <div class="name">Name</div>
</div>

和CSS代码

.box
{
  text-align:center;
  width:105px;
}
.name
{
  font-size:11pt;
  margin-top:8px;
  text-transform:uppercase;
}
.logo
{
  width:105px;
  height:105px;
  background:white;
  display: table-cell;
  vertical-align: middle;
  position:relative;
}
.logo:after
{
  content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
  position:absolute;
  bottom:-15px;
  display:block;
  height:15px;
}
.logo img
{
  margin:0 auto;
  max-width:85%;
  width:85%;
  max-height:85%;
}

问题是如何与chrome或即显示器执行相同的结果。 另外,它可能是其他解决方案,为所有Web浏览器提供相同的结果。

谢谢

更新:我认为原因是我进行了显示

display:table-cell;

我改变为显示块并且它的工作,但我想使徽标垂直居中。 我该怎么办?

2 个答案:

答案 0 :(得分:2)

而不是使用content: url();使用content: ' ';并使用background-image,它应该适合你

Demo

.logo:after {
    content:' ';
    height: 15px;
    width: 100px;
    background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
    position:absolute;
    top: 110px;
    display:block;
    background-repeat: no-repeat;
}

编辑:

如果您在使用display: table-cell;时遇到问题,可以使用display: block;代替position: absolute; img标记并使用topleft使用自定义值将图像垂直设置在中间。

Demo

答案 1 :(得分:0)

使用content作为“” 并添加background

  .logo:after 
   {
      background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
   }