jquery - IE 8 CSS li 显示不正确

Question

我在下面“属性文件”部分下的链接中使用轮播。在 IE 8 中，li 看起来很奇怪，它们不像在现代浏览器中那样宽。

是否有一个简单的修复方法可以让它在 IE8 中看起来不错？现在我在 li 上有以下自定义属性，但我没有运气。它们根本没有出现在 IE7 中，所以我希望此修复程序也能让它们出现在 IE7 中。

   .boutique img{

    }

    .boutique a {

    }

    .boutique li {

    }

我最近刚刚取出了我的CSS。这让事情变得更糟。

这是 jQuery...

<script>
$(document).ready(function(){
    $('#boutique').boutique({
    container_width:    200,
    front_img_width:     58,
    front_img_height:    72,
    starter:              3,
    speed:              900,
    hovergrowth:        0.2,
    behind_opacity:     0.3,
    back_opacity:         1,
    frames:               3,
    autoplay:         false,
    hovergrowth:          0,
    freescroll:       false,
    move_on_hover:    false,
    text_front_only:   true,
    });
});

以及 jQuery 文件的链接。 http://landpros.turnpostinteractive.com/javascripts/jquery.boutique.js

这是精品店的 HTML。

<div id="parent">
            <img id="prev-boutique" src="images/details-page/prev.png" onclick="boutique_previous()" />
            <img id="next-boutique" src="images/details-page/next.png" onclick="boutique_next()" />
            <!-- The Boutique HTML: -->
            <ul id="boutique">
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>           
            </ul>
        </div>

http://landpros.turnpostinteractive.com/LandPros_Details2_1.html

这是它在 ie8 中的作用的链接... http://imgur.com/5LWsXal

任何帮助都会很棒!谢谢你!

Answer 1

我刚刚检查了 <li>代码的元素。 看起来您使用的 javascript 未针对 IE8 进行优化。它设置了 width:58px的 <li>所有浏览器中的元素，但将宽度设置为 6px在 IE8 中。您能否提供指向您用于图像的 jQuery 代码的链接？

编辑#1

添加属性 width:25%所有 <li>元素。 定义一个类 .dummy有属性(property)width:36%对于以下 javascript。

然后添加这个javascript:

var liElements = document.getElementsByTagName("li");
for (var i = 0; i < liElements.length; i++) {
  var liElement = liElements[i];
  if (liElement.style.top == "0px" && liElement.style.left == "0px") {
    liElement.className += "dummy"; 
  }
  else{
  liElement.className -= "dummy";
  }
}