我的代码在不同的浏览器中不起作用

Question

我正在制作幻灯片。这对我来说非常有用，但我有一个问题。我的内容在Firefox 12中正确显示，但在Google Chrome和Internet Explorer 6和7中无法正确显示。我试图解决它很长一段时间，但没有运气。

我的预期输出应该是这样的：

这是我的CSS：

.container{
  width:290px;
  //height:440px;
  margin:0 auto;
  position:relative;
  //padding-bottom:30px;
  overflow:hidden;
}

.slide1, .slide2, .slide3 {
    overflow: hidden;
    height: 440px;
    //border: 1px solid red;
}

.slide1 blockquote, 
.slide2 blockquote,  
.slide3 blockquote {
  margin:0;
  padding: 30px 30px;
  height: 250px;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  display: block;
  transition: background-color 0.6s linear;
}

blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #DA532B;
  border-left-color:#DA532B;
  border-width: 10px; 
  left: 10%; 
} 

.slide1 blockquote { 
  background-color: #DB532B;
}

.slide2 blockquote { 
  background-color: purple;
}

.slide3 blockquote { 
  background-color: #54885F;
}


.leftquotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
  top:-18px;
  left:5px;
}

.rightquotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
  bottom:-10px;
  right:5px;
}

img{
  float:left;
  margin-right: 20px;
}


.slide1bottom {
    height: 10px;
    width: 90px;
    background: #DB532B;
    position: absolute; 
    left: 0;
    bottom: 2px;
    cursor: pointer;
}

.slide2bottom {
    height: 10px;
    width: 90px;
    background: purple;
    position: absolute; 
    left: 100px;
    bottom: 2px;
    cursor: pointer;
}

.slide3bottom {
    height: 10px;
    width: 90px;
    background: #54885F;
    position: absolute; 
    left: 200px;
    bottom: 2px;
    cursor: pointer;
}

.image-name-container {
    height:110px;
     //margin: -15px 0 0 0;
}
.notactive {
    height: 10px;
    width: 90px;
    background: #fff;
    cursor: pointer;
    display: inline-block;
     margin: 0 6px 0 0;
}

这就是全部code so far

编辑：

看来，这个css代码无法使用谷歌浏览器和IE 6,7

.slide1 blockquote, 
.slide2 blockquote,  
.slide3 blockquote {
  margin:0;
  padding: 30px 30px;
  height: 250px;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  display: block;
}

Answer 1

您已将.slide元素的高度设置为440px，只需要380px，并且您在bottom:2px上使用.slide1bottom等元素因此它们一直移动到容器的底部（440-2px）。

将其设置为380px解决了chrome中的问题。我现在没有时间看IE。

.slide1, .slide2, .slide3 {
    overflow: hidden;
    height: 380px;
    //border: 1px solid red;
}

http://jsfiddle.net/qNXHf/7/

或者，如果您想保持原始高度，可以将.blockquote元素设置为height:310px而不是250px。