1

I'm using a Carousel in the link below under the section "PROPERTY DOCUMENTS". In IE 8 the li's are looking weird they aren't wide like they look in modern browsers.

Is there a simple fix on this so that it can look good in IE8? Right now I have the following custom attributes on the li's but am having no luck. They aren't showing up at all in IE7 so I'm hoping that this fix will have them show up in IE7 also. 

   .boutique img{

    }

    .boutique a {

    }

    .boutique li {

    }

I just recently took out the css I had. It was making things worse.

Here is the 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,
    });
});

and the link to the jQuery file. http://landpros.turnpostinteractive.com/javascripts/jquery.boutique.js

Here is the HTML to the boutique. 

<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

Here is a link to what its doing in ie8... http://imgur.com/5LWsXal

Any help would be awesome! Thank you!

4

2 回答 2

0

我刚刚检查了<li>代码的元素。看起来您使用的 javascript 不是 IE8 优化的。它在所有浏览器width:58px中设置元素，但在 IE8 中<li>设置宽度。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";
  }
}
于 2013-01-26T18:47:26.033 回答
0

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

于 2014-06-13T07:30:15.557 回答