Question

我在我的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
}

Answer 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;
}

旋转木马按钮定位错误chrome和firefox

1 个答案: