文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Firefox不正确地显示图像(CSS + HTML)

问Firefox不正确地显示图像(CSS + HTML)
EN

Stack Overflow用户
提问于 2015-12-07 17:44:46
回答 1查看 71关注 0票数 0

我正在为一个网站的主页建立一个压路机。我使用了一个轻型开源滑块作为我的模板，并随后剥离了它的无关特性，只留下了我的任务所需的特性。我目前遇到的问题是，它在Safari和Chrome中工作正常，但在Firefox中显示却很困难。

以下是一些例子：

铬：

​

Firefox：

​

​

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

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

Slider.html代码：

代码语言：javascript
复制
<!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代码：

代码语言：javascript
复制
/*
 * 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;
}
javascript
jquery
html
css
firefox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-07 18:12:34

在css中查找此部分：

代码语言：javascript
复制
.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文件

代码语言：javascript
复制
.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)实际上有一个内联样式的宽度设置，从而解决了这个问题。另一方面，火狐似乎只是把width: auto;看作是“你想要的宽度”。因此这个错误。

通过同时给.bp-hs_inner__item left: 0;和right: 0，我强迫它和它的父级具有相同的宽度，因此给出的是一个实际的宽度，可以由img来比较。另一种修复方法可能是使用max-width: 100%;而不是right: 0;。我想这两种方法都够了。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34139888

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档