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>，但在IE8中将宽度设置为6px。你能给出你用于图像的jQuery代码的链接吗？

修改＃1

向所有width:25%元素添加属性<li>。为以下javascript定义具有属性.dummy的类width:36%。

然后添加此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"; } }

Answer 2

对我而言，它通过在style.css中添加它来工作： #boutiqueinit .boutique-frame {border：1px solid #ffffff;} 如果没有这个在IE8中，li的显示不正确。该行来自http://friquemag.net/demos/boutique/index2.html?v=152示例2

的demo.css

IE 8 CSS li显示不正确

2 个答案: