.net Bootsrap垂直旋转木马铬合金和IE

我对Chrome和IE上的引导垂直旋转木马有问题，但在Firefox中没有。 在Firefox中，它工作得很好

问题是——当我点击下一张幻灯片时，内容会发生变化，但不会以Firefox中的变化方式和应该的方式发生变化

我试着做一个垂直滑块-请进入链接，查看即将到来的事件的内容滑块，点击红色按钮调用更多，查看它在Firefox上的工作方式以及在Chrome上的工作方式

非常感谢您的帮助：

以下是我的代码，如果它有助于您帮助我：

<!-- MainProductionHomePage -->
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
 <div class="row-fluid">
    <div class="span12">
    <!-- slider start here -->
    <div id="eventCarousel" class="carousel slide vertical" >
    <div class="carousel-inner" style="min-height:800px;">
@{
     <!-- get the content for the slider -->
    var content = Umbraco.Content(xxxx);

    int itemsCount = content.Children.Count();
    int sliders = itemsCount % 5;
    int currSlider = 0;

    for (int i = 0; i <= sliders; i++)
    {
        var items = content.Children;

        if (i == 0)
        {
            @Html.Raw("<div class=\"item active\">")
            items = content.Children.Take(5);
        }
        else
        {
            items = content.Children.Skip(i * 5).Take(5);
            @Html.Raw("<div class=\"item\">")
        }

        foreach (var item in items)
        {
            var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(item.Id.ToString()));

            var image = Umbraco.Media(contentService.Properties["smallThumbnail"].Value.ToString());
            var imageUrl = image.url;

            var date = (DateTime)contentService.Properties["date"].Value;
            var name = contentService.Properties["name"].Value;
            var description = contentService.Properties["fullText"].Value;
            var themeColor = contentService.Properties["themeColor"].Value;
            var shortDescription = contentService.Properties["shortText"].Value;
            var itemUrl = String.Format("production/{0}", item.name.ToString().Replace(" ", "-"));

            // IF Iteration HERE
            <div class="row custom">
                <!-- DATE -->
                <div style="float:left;" onclick="location.href='@itemUrl';">
                    <!-- PRODUCTION Image -->
                    <div class="event-thumb col-md-3 col-sm-4 col-xs-12 no-wrap-col">
                        <img src="@imageUrl" class="production-image" style="cursor:pointer;" />
                    </div>
                    <!-- End PRODUCTION  Image -->
                    <div class="event-list col-md-2 col-sm-3 no-wrap-col" >
                        <div>
                            <time datetime="2014-07-20 0000">
                                <span class="date" style="background-color:#@themeColor !important;">@date.ToString("dd.MM")</span>
                                <span class="day" style="background-color:#@themeColor !important;">@date.DayOfWeek.ToString().ToUpper()</span>
                                <span class="background-white"  style="color:#@themeColor !important;">
                                    <span class="hour">@date.ToString("HH:mm")</span>
                                </span>
                            </time>
                        </div>
                    </div>
                    <!-- END DATE -->
                    <div class="col-md-7 col-sm-5 no-wrap-col">
                        <div class="homepage-production-title">
                            <a href="~/@itemUrl" style="color:#@themeColor">@name.ToString().ToUpper()</a>
                        </div><span class="production-description">
                            @MvcHtmlString.Create(shortDescription.ToString().Length > 150 ? shortDescription.ToString().Substring(0, 150) : shortDescription).. 
                            <a href="~/@itemUrl" style="color:#@themeColor">Read more</a>
                            </span>
                    </div>
                </div>
            </div>
        }
             @Html.Raw("</div>")
    }
}                   
            </div>
         </div>
    </div>
    @if (itemsCount > 5)
    {
        <a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
    }
    </div>
</div>

试试这个

更多信息请点击此处：

引导程序3：

引导程序2：

---

事实上，几天前我也遇到了同样的问题。我已经把范围缩小到了.carousel和.carousel内部类

如果您将.vertical.active.left设置为旋转木马的精确高度，left:100%可以解决Chrome的问题，而Firefox也开始做同样的事情。我会留下几张照片给任何能帮助我们的人，让你随时了解情况

请注意，Chrome first image将.active.left元素100%向左移动，而Firefox将其与容器的左边框对齐。active.left最初的左值为零

-

---

希望这能帮助我们

完全脱离主题，但不应使用ContentService。内容服务将命中数据库而不是内容缓存。尝试使用@CurrentPage或@model.Content在视图上使用当前模型。这将使你的页面更快。谢谢你，我的朋友，我会修复它。我真的很明确：这应该是一个评论，而不是一个答案。再重复一点。在此之前，请不要使用答案作为解决办法。

<div class="carousel-inner">

    <div class="item active">
        <div class="row-fluid">
          <table>
          <tr>
            <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/1.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
          </tr>
          <tr>
            <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/2.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
          </tr>
          <tr>
            <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/3.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
          </tr>
          <tr>
            <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/4.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
          </tr>
          </table>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
           <table>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/5.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/6.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/7.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/8.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
          </table>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <table>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/9.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/10.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/11.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
              <tr>
                <td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/12.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
              </tr>
            </table>
        </div><!--/row-fluid-->
    </div><!--/item-->

</div>