1

我正在创建幻灯片。这对我来说非常有用，但我有一个问题。我的内容在 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;
}

这是到目前为止的所有代码

编辑：

看来，这个 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;
}
4

1 回答 1

0

.slide您已将元素的高度设置为440px，而它们只需要380px，并且您正在使用bottom:2pxetc..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.

于 2013-03-12T22:58:01.233 回答