Question

我正在为网站的主页建立一个heroslider。我使用了一个轻型开源滑块作为我的模板，然后将其剥离了无关的功能，只留下了我的任务所需的那些。我目前遇到的问题是它在Safari和Chrome中正常运行，但在Firefox中显示有问题。

以下是示例：

铬：

火狐：

正如您所看到的，在Firefox中，用作幻灯片的图像不会使用滑块本身进行缩放。相反，浏览器显示图像的左上角，该左上角对应于屏幕给定分辨率下滑块的大小。

有谁能告诉我这里出了什么问题？我需要某种针对Firefox的黑客攻击吗？如果需要，我可以在下面发布CSS和HTML代码。

slider.html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Boompx jQuery Hero Slider Plugin</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="description" content="Boompx jQuery Hero Slider Plugin">
        <link rel="shortcut icon" href="favicon.png">

        <!-- [ Optional ] -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/custom.css">

        <!-- [ REQUIRED ] -->
        <link rel="stylesheet" href="css/bpHS.min.css">
    </head>
    <body>
    <!--[if lte IE 8]>
      <div id="browser-status"> 
        Dear Web User, your browser is out of date! <a href="http://browsehappy.com/" target="_blank">
        Please Upgrade Your Browser
      </a>
      </div>
    <![endif]--> 

    <div class="container">

        <div class="bp-hs" id="demo-default">
          <div class="bp-hs_inner">
            <div class="bp-hs_inner__item" data-transform="scale">
              <img src="assets/img/slider/main/01.jpg" alt="Boompx Hero Slider 01"/>
            </div>
            <div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
              <img src="assets/img/slider/main/02.jpg" alt="Boompx Hero Slider 02"/>
            </div>
            <div class="bp-hs_inner__item" data-transform="rotate"  data-origin="bottom-left">
              <img src="assets/img/slider/main/03.jpg" alt="Boompx Hero Slider 03"/>
            </div>
            <div class="bp-hs_inner__item">
              <img src="assets/img/slider/main/04.jpg" alt="Boompx Hero Slider 04"/>
            </div>
          </div>
        </div>

    </div>

    <!-- [ REQUIRED ] -->
    <!-- Requiring jQuery and touchSwipe for the Homepage slider -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/vendors/jquery.touchSwipe.min.js"></script> <!-- optional (required for touchSwipe option) -->
    <script src="js/bpHS.min.js"></script>

    <!-- [ Demo Script ] -->
    <script src="js/custom.js"></script>

    <!-- [ Optional ] -->
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

    </body>
</html>

bpHS.css的代码：

/*
 * Boompx jQuery Hero Slider Plugin v0.1.0
 * Demo    : http://codepen.io/boompx/full/wBmeQb/
 * Github  : https://github.com/boompx/bpHS
 * Vendors : https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
 * Author  : boompx.com - @boom_px
 * Licensed under the MIT license
 */
.bp-hs .bp-hs_inner .bp-hs_inner__item, .bp-hs .bp-hs_control .bp-bullets .bp-bullets_bullet {
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.bp-hs {
  height: 225px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 767px) {
  .bp-hs {
    height: 450px;
  }
}
.bp-hs .bp-hs_inner .bp-hs_inner__item {
  position: absolute;
  top: 0;
  left: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.bp-hs .bp-hs_inner .bp-hs_inner__item.is-active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-origin="top-right"] {
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -webkit-transform-origin: top right;
  transform-origin: top right;
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-origin="bottom-left"] {
  -moz-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-origin="top-left"] {
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="rotate"][data-origin="top-left"] {
  -moz-transform: rotate(-145deg);
  -ms-transform: rotate(-145deg);
  -webkit-transform: rotate(-145deg);
  transform: rotate(-145deg);
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="rotate"][data-origin="top-right"] {
  -moz-transform: rotate(145deg);
  -ms-transform: rotate(145deg);
  -webkit-transform: rotate(145deg);
  transform: rotate(145deg);
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="rotate"][data-origin="bottom-left"] {
  -moz-transform: rotate(145deg);
  -ms-transform: rotate(145deg);
  -webkit-transform: rotate(145deg);
  transform: rotate(145deg);
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="rotate"].is-active {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="scale"] {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
.bp-hs .bp-hs_inner .bp-hs_inner__item[data-transform="scale"].is-active {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.bp-hs .bp-hs_control .bp-btn {
  position: absolute;
  top: 50%;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin-top: -20px;
  font-size: 18px;
  color: #999;
  background-color: rgba(255, 255, 255, 0.9);
}
.bp-hs .bp-hs_control .bp-btn.bp-hs_control__prev {
  left: 30px;
}
.bp-hs .bp-hs_control .bp-btn.bp-hs_control__next {
  right: 30px;
}
.bp-hs .bp-hs_control .bp-bullets {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  text-align: center;
}
.bp-hs .bp-hs_control .bp-bullets .bp-bullets_bullet {
  margin: 0 3px;
  cursor: pointer;
  width: 12px;
  height: 12px;
  display: inline-block;
  background-color: #fff;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
.bp-hs .bp-hs_control .bp-bullets .bp-bullets_bullet.current {
  cursor: default;
  background-color: #2b2f31;
}
.bp-hs img {
  max-width: 100%;
}
.bp-hs:hover, .bp-hs:active, .bp-hs:focus,
.bp-hs *:hover,
.bp-hs *:active,
.bp-hs *:focus {
  outline: 0;
}
.bp-hs.has-touchSwipe {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.bp-hs.has-touchSwipe:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

Answer 1

在css中查找此部分：

.bp-hs .bp-hs_inner .bp-hs_inner__item {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;

    /* Then add this line */
    right: 0;
}

或者，如果您不想编辑库的css，只需添加到您自己的css文件

.bp-hs .bp-hs_inner .bp-hs_inner__item {
    right: 0;
}

图像正确定位。它在Firefox上没有正确缩放。原始图像比滑块的可见区域宽得多。 img本身设置max-width: 100%以确保在父级宽度小于其默认大小的情况下缩小它。此处出现问题的原因是：其父级（.bp-hs_inner__item）没有设置宽度值，这意味着它具有默认的css值width: auto;。

我的猜测是，Chrome会将width: auto;视为“尽可能多，但不会超过您的父母”。 .bp-hs_inner__item的父级（.bp-hs_inner）实际上在其内联样式中设置了宽度，因此可以解决问题。另一方面，Firefox似乎只是将width: auto;视为“你想要的宽度。”因此该错误。

通过.bp-hs_inner__item同时left: 0;和right: 0，我强制它与其父级具有相同的宽度，因此给出的是一个可以通过{{进行比较的实际宽度1}}。另一种解决方法是使用img而不是max-width: 100%;。我认为这两种方法都足够了。

Firefox错误地显示图像（CSS + HTML）

1 个答案: