1

スライドショーを作成しています。それは私にとってはかなりうまくいっていますが、私には問題があります。私のコンテンツはFirefox12で正しく表示されますが、GoogleChromeとInternetExplorer6および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コードはグーグルクロームとIE6,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要素の高さを に設定し、 etc. 要素を使用しているため、コンテナの下部 (440-2px) までずっと移動しています。440px380pxbottom:2px.slide1bottom

380px に設定すると、クロムの問題が解決します。今は 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 に答える