0

Rails アプリケーションにカルーセルを追加しました。これはFirefoxで正常に機能しています。でもchromeを見たら「次へ」ボタンの位置が変わっていることに気づきました。今まで修正が見つかりませんでした。

以下は、すべてのカルーセルのCSSです

.proposal-section .carousel-previous {
  background: url("/assets//previous.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: 3px;
  margin-top: 70px;
  z-index: 1000;
}

Chrome は、このプロパティ値「margin-left: -35;」を使用してページの左端に次のボタンを表示しますが、ff は問題ありません。そして ff は、「margin-left: 950;」でこのボタンが表示されていない (右側) ことを示しています。しかし、クロムで大丈夫です。これを修正するにはどうすればよいですか。

.proposal-section .carousel-next {
  background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: -35px;
  margin-top: 71px;
}

.proposal-section .carousel-control {
  overflow:hidden;
  display:inline-block;
  vertical-align:middle;
  width:30px;
  height:32px;
  cursor:pointer;
  line-height:999px;
  zoom:1;
  border:0;
  text-indent:-9999px;
}

.proposal-section .carousel-control:hover {
  -moz-opacity:.7;
  opacity:0.70;
  filter:alpha(opacity=70);
}

.proposal-section .carousel-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 99%;
  border: 3px solid #473161;
  border-radius: 5px;
  height: 174px !important
}
4

1 に答える 1

1

これを試してみてください。両方のブラウザでボタンが作成されます（すべての場合があります）：

.proposal-section .carousel-control {
  overflow:hidden;
  display:inline-block;
  vertical-align:middle;
  width:30px;
  height:32px;
  cursor:pointer;
  line-height:999px;
  zoom:1;
  border:0;
  text-indent:-9999px;
}

.proposal-section .carousel-control:hover {
  -moz-opacity:.7;
  opacity:0.70;
  filter:alpha(opacity=70);
}

.proposal-section .carousel-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 99%;
  border-radius: 5px;
  height: 174px !important
}

.proposal-section .carousel-next {
  background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: 5px;
  margin-top: 65px;
  height: 45px;
  width: 23px;
  opacity:0.4;
  filter:alpha(opacity=40);
  -moz-opacity: .4;
}

.proposal-section .carousel-previous {
  background: url("/assets//prev.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: -10px;
  margin-top: 65px;
  height: 45px;
  width: 23px;
  z-index: 1000;
  opacity:0.4;
  filter:alpha(opacity=40);
  -moz-opacity: .4;
}
于 2012-12-11T11:19:42.690 に答える