1

我正在与 Galleria Classic 合作。如何让我的缩略图在 Internet Explorer 中的高度和宽度都相同？我使用 (.galleria-thumbnails .galleria-image) 样式调整了 CSS 中的属性。它在 Safari 和 Firefox 中运行良好，但 Internet Explorer 似乎要么拉伸了我的一些拇指的宽度，要么正在调整它们的大小和裁剪它们。高度似乎从未受到影响，这很好，但我希望它们都一样。有任何想法吗？

这是我在结束正文标记之前的脚本：

<script>
    Galleria.loadTheme('tools/galleria/themes/classic/galleria.classic.js');
</script>

<script>
    $('#galleria').galleria({
        extend: function() {
            this.play(3000);
            this.bind(Galleria.LOADFINISH, function(e) {
                $(e.imageTarget).click(this.proxy(function(e) {
                    e.preventDefault(); // removes the garbage
                    var obj = this.getData();
                    $.fancybox({
                        'href': obj.image

                    });
                }))
            });
        }
    });
</script>

CSS 看起来像这样：

.galleria-thumbnails-container {
    bottom: 0;
    left: 5px;
    position: absolute;
    z-index: 2;
    margin-top: 10px;
    width: 400px;
    height: 60px;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    border: 1px solid #000;
    float: left;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
}
4

1 回答 1

1

修复 IE 框模型错误 这可能是 IE 6 及以下版本中最常见和最令人沮丧的错误。这是由于 IE 在计算框的总大小时采用不同的方法造成的。让我们说你写

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

根据 W3C 规范，盒子的总宽度应该是 124px，所有现代浏览器都遵循，而 IE 仅计算为 100px。

这种与规范的偏差会导致很多布局问题。如果您处于标准兼容模式，IE 6 实际上可以做到这一点。此问题有多种解决方法。他们之中有一些是：

BOX-IN-A-BOX 根据这种技术，我们只需使用额外的标记来解决问题。我们没有在主元素上使用填充，而是在其中插入另一个元素并在其上使用填充。喜欢

<div class=”box”&gt;
  <div class=”box-inner”&gt;
    Testing for box model hack
  </div>
</div>

在这种情况下，我们的标记将是

.box { width:100px;}
.box-inner {padding:10px;}

简化的盒子模型黑客（SBMH）

它使用 Internet Explorer 的 CSS 解析错误来解决该问题。这首先由 Andrew Clover 详细介绍

这个hack的结构是

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

第一行width: 100px;是针对 Mozilla 和 Opera 等能够正确呈现的浏览器。Opera 和其他浏览器被转义字符 ( \) 阻塞，因此将忽略第二个和第三个属性。第二个属性\width: 140px;适用于 IE 5 和 6/quirks 模式。最后一行w\idth: 100px;将被转义友好的浏览器（包括非怪癖模式下的 IE 6）读取，并将宽度设置回 100px。

BOX-SIZING 新引入的 CSS3 box-sizing 属性允许你选择你的浏览器应该使用的 box-model。W3C 盒子模型被称为content-box，Internet Explorer 盒子模型被称为border-box。

这可以更容易地控制元素的大小，并使大小在不同浏览器中表现相同。

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

如果网站以 quirks 模式呈现，则 IE6 将使用非标准框模型进行呈现，因此它已经像打开border-box属性一样呈现。现代浏览器将通过设置此属性来采用 IE 的错误框模型。

希望这可能会有所帮助...

于 2011-02-08T11:04:42.870 回答