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

时间：2015-09-05 22:15:02

标签： javascript jquery html css image

最近，我已经从

实现了这个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>

2 个答案:

答案 0 :(得分：1)

您应用了内联css样式

width: 0px;
height: 0px;

到班级img-box ic_container的三个div。如果你删除它们（至少在Windows 10 x64上的chrome 45）

https://jsfiddle.net/w3mbbwth/

答案 1 :(得分：0)

问题已经解决了！我查看了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

相关问题
最新问题