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

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 代码不适用于 google chrome 和 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 .