jquery - IE7在jQuery Slider中堆叠左浮动div

Question

我正在为我下载的模板使用内容滑块。在所有现代浏览器中，我几乎都得到了我想要的。现在我正在尝试一些跨浏览器测试，我在 ie7 中遇到了一个错误，它堆叠项目而不是在屏幕上浮动并隐藏它们。

这是我的网站：

http://dl.dropbox.com/u/62054561/Rust%20Website/index.html

但这是它在 IE7 中的外观：

任何帮助都会很棒，谢谢。

Answer 1

给最外层的 div 一个指定的宽度，在你的情况下：

<div class="slider_main" style="width: 915px">
    ....content.....
  <div style="clear: both;"></div>
</div>

等等。

不久前我遇到了类似的问题，在这里找到了答案：IE7 中的奇怪浮动行为

希望有帮助。

Answer 2

这是 IE 和 inline-block 元素的问题。

到处都有以下 CSS 代码

display:inline-block

你需要为 IE 添加这个

    display:inline-block;
    *display: inline;
    zoom:1;

Answer 3

您的 Javascript 中有 2 个错误。

您正在尝试将字符串乘以一个数字，这会导致它中断：

var height = '190',
    width = '915',
    slides = 3,
    tabs = $('.tab'),
    contentNum = 1;

'width'您还缺少jquery.css()函数中的引号

$('.slider_main_inner').css({
    width: slides * width,
});

固定版本

使用数字而不是字符串，并在周围添加引号width

var height = 190,
    width = 915,
    slides = 3,
    tabs = $('.tab'),
    contentNum = 1;

$('.slider_main_inner').css({
    'width': (slides * width)
});