为什么有些浏览器会混淆我的图像框？

Question

最近，我实现了这个HTML，jQuery和CSS代码

http://tympanus.net/jCapSlide/

我试着在这个网站上我的：

http://planet.nu/dev/test-3/index.html

根据在你使用的浏览器上，它是混乱或不混乱。我已经在跨浏览器的应用程序上测试过它。您可以在此查看结果：

http://app.crossbrowsertesting.com/public/i99483c7ba57b2d7/screenshots/zb7c9fcea018d0526165

我已经测试jCapSlide网站上的跨浏览器的应用程序也是如此。无论您使用何种浏览器，结果都是一致的。

我意识到Javascript是主要的罪魁祸首。它为img-box ic_container的宽度和高度创建内联样式。我的问题是，我应该删除哪部分代码？或者我需要重写它？

https://jsfiddle.net/w3mbbwth/4/

 (function($) { 
 
      $.fn.capslide = function(options) { 
 
      var opts = $.extend({}, $.fn.capslide.defaults, options); 
 
      return this.each(function() { 
 
       $this = $(this); 
 
       var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 
 

 
       if (!o.showcaption) $this.find('.ic_caption').css('display', 'none'); 
 
       else $this.find('.ic_text').css('display', 'none'); 
 

 
       var _img = $this.find('img:first'); 
 
       var w = _img.css('width'); 
 
       var h = _img.css('height'); 
 
       $('.ic_caption', $this).css({ 
 
       'color': o.caption_color, 
 
       'background-color': o.caption_bgcolor, 
 
       'bottom': '0px', 
 
       'width': w 
 
       }); 
 
       $('.overlay', $this).css('background-color', o.overlay_bgcolor); 
 
       $this.css({ 
 
       'width': w, 
 
       'height': h, 
 
       'border': o.border 
 
       }); 
 
       $this.hover(
 
       function() { 
 
        if ((navigator.appVersion).indexOf('MSIE 7.0') > 0) 
 
        $('.overlay', $(this)).show(); 
 
        else 
 
        $('.overlay', $(this)).fadeIn(); 
 
        if (!o.showcaption) 
 
        $(this).find('.ic_caption').slideDown(500); 
 
        else 
 
        $('.ic_text', $(this)).slideDown(500); 
 
       }, 
 
       function() { 
 
        if ((navigator.appVersion).indexOf('MSIE 7.0') > 0) 
 
        $('.overlay', $(this)).hide(); 
 
        else 
 
        $('.overlay', $(this)).fadeOut(); 
 
        if (!o.showcaption) 
 
        $(this).find('.ic_caption').slideUp(200); 
 
        else 
 
        $('.ic_text', $(this)).slideUp(200); 
 
       } 
 
      ); 
 
      }); 
 
      }; 
 
      $.fn.capslide.defaults = { 
 
      caption_color: 'white', 
 
      caption_bgcolor: 'black', 
 
      showcaption: true 
 
      }; 
 

 
     })(jQuery); 
 

 
     $(function() { 
 
      $("#capslide_img_cont6").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
      $("#capslide_img_cont7").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
      $("#capslide_img_cont8").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
      $("#capslide_img_cont9").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
      $("#capslide_img_cont10").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
      $("#capslide_img_cont11").capslide({ 
 
      caption_color: 'white', 
 
      caption_bgcolor: '#000', 
 
      showcaption: true 
 
      }); 
 
     });

p { 
 
    color: #666 !important; 
 
    font-size: 14px; 
 
} 
 
body { 
 
    background-color: #fff !important; 
 
    color: #595959; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    overflow-x: hidden !important; 
 
} 
 
#sandbox_inc { 
 
    margin: 0 auto !important; 
 
    width: 100% !important; 
 
} 
 
#homeSandbox { 
 
    margin: 0 !important; 
 
} 
 
.three-boxes { 
 
    width: 940px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    height: 400px; 
 
} 
 
.img1, 
 
.img2, 
 
.img3 { 
 
    width: 295px; 
 
    height: 261px; 
 
    float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-top: 30px; 
 
    margin-bottom: 55px; 
 
} 
 
.img1, 
 
.img2 { 
 
    margin-right: 7px; 
 
} 
 
.image-box { 
 
    float: left; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 30px; 
 
} 
 
.ic_container {} .img-box { 
 
    margin-right: 15px; 
 
} 
 
.overlay { 
 
    opacity: 0.3; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); 
 
} 
 
.ic_caption { 
 
    position: absolute; 
 
    opacity: 0.8; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
    padding: 15px; 
 
    left: 0px; 
 
    right: 0px; 
 
    cursor: default; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60); 
 
    width: 273px !important; 
 
} 
 
.ic_category { 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 3px; 
 
    padding: 5px; 
 
    margin: 0px; 
 
} 
 
.ic_caption h3 { 
 
    padding: 0px 5px 5px 5px; 
 
    margin: 0px; 
 
    font-size: 18px; 
 
} 
 
.ic_text { 
 
    padding: 15px 5px; 
 
    margin: 0px; 
 
    font-size: 14px; 
 
    color: #FFF !important; 
 
    line-height: 1.5em; 
 
} 
 
.ic-button { 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    background: #CE284E none repeat scroll 0% 0%; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #FFF !important; 
 
    margin-top: 15px !important; 
 
    display: block; 
 
    text-align: center; 
 
    font-weight: bold; 
 
} 
 
.ic-button:hover { 
 
    background: #c20f3b; 
 
    text-decoration: none; 
 
} 
 
.contact-btn { 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    background: #CE284E none repeat scroll 0% 0%; 
 
    padding: 5px 25px; 
 
    text-decoration: none; 
 
    color: #FFF !important; 
 
    margin-top: 15px !important; 
 
}

<html> 
 

 
<head> 
 
    <title>Index</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script type="text/javascript" src="js/item-hover.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
</head> 
 

 
<body> 
 
    <div id="sandbox_inc" class="include"> 
 
    <div class="three-boxes"> 
 
     <p class="three-boxes-header">We thought you might also be interested in...</p> 
 
     <div class="image-box"> 
 
     <div id="capslide_img_cont6" class="img-box ic_container"> 
 
      <img src="http://planet.nu/dev/test-3/img/thumb-content-video-effective-customer-acquisiton.jpg" alt="Watch our latest video"> 
 
      <div class="overlay"></div> 
 
      <div class="ic_caption"> 
 
      <h3>Watch our latest video</h3> 
 
      <p class="ic_text">Effective Customer Acquisition</p> 
 
      <p class="ic_text">Digital Consultant, Jalna Soulage describes how to build a strategy for delivering fast and effective results 
 
       <br> 
 
       <a class="ic-button" href="/marketing-services/knowledge/webinars/webcast-customer-acquisition.html" onclick="s_objectID=&quot;http://stg1-britain.experian.com/marketing-services/knowledge/webinars/webcast-customer-acquisiti_1&quot;;return this.s_oc?this.s_oc(e):true">Watch now</a> 
 
      </p> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="image-box"> 
 
     <div id="capslide_img_cont7" class="img-box ic_container"> 
 
      <img src="http://planet.nu/dev/test-3/img/thumb-content-report-email-benchmark-q2.jpg" alt="Download a trend report"> 
 
      <div class="overlay"></div> 
 
      <div class="ic_caption"> 
 
      <h3>Download a trend report</h3> 
 
      <p class="ic_text">Q2 2015 Email Benchmark Report</p> 
 
      <p class="ic_text">Analysing campaign performance across key industries, including travel, retail, fashion and more 
 
       <br> 
 
       <a class="ic-button" href="/marketing-services/knowledge/reports/report-q2-email-benchmark.html" onclick="s_objectID=&quot;http://stg1-britain.experian.com/marketing-services/knowledge/reports/report-q2-email-benchmark.h_1&quot;;return this.s_oc?this.s_oc(e):true">Learn more</a> 
 
      </p> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="image-box"> 
 
     <div id="capslide_img_cont8" class="ic_container"> 
 
      <img src="http://planet.nu/dev/test-3/img/thumb-content-blog-latest-insights.jpg" alt="Read our marketing blog"> 
 
      <div class="overlay"></div> 
 
      <div class="ic_caption"> 
 
      <h3>Read our marketing blog</h3> 
 
      <p class="ic_text">Keep up-to speed with all the latest marketing challenges, trends and opportunities with insight, research and opinion from some of the industy's leading experts 
 
       <br> 
 
       <a class="ic-button" href="http://www.experian.co.uk/blogs/latest-thinking/category/marketing/" onclick="s_objectID=&quot;http://www.experian.co.uk/blogs/latest-thinking/category/marketing/_1&quot;;return this.s_oc?this.s_oc(e):true">Read more</a> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

您应用的内嵌CSS样式

width: 0px; 
height: 0px; 

三个的div类img-box ic_container。如果你（在Windows 10的x64至少在Chrome 45）

https://jsfiddle.net/w3mbbwth/

Answer 2

删除其工作问题解决了！我研究了Pinguin提出的建议，并且jCapSlide和我意识到我可以通过HTML解决这个问题。

通过给出图像的高度和宽度。这一个例子：

<img src="img/thumb-content-report-email-benchmark-q2.jpg" width="303" height="303" alt="Download a trend report"> 

我猜的JavaScript无法检测图像的宽度和高度，所以我必须输入他们的HTML，使其工作。

你可以在这里查看结果： http://app.crossbrowsertesting.com/public/i99483c7ba57b2d7/screenshots/z2dcb69c024b6fb84fb8