0
最近，我实现了这个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="http://stg1-britain.experian.com/marketing-services/knowledge/webinars/webcast-customer-acquisiti_1";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="http://stg1-britain.experian.com/marketing-services/knowledge/reports/report-q2-email-benchmark.h_1";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="http://www.experian.co.uk/blogs/latest-thinking/category/marketing/_1";return this.s_oc?this.s_oc(e):true">Read more</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我觉得你的CSS是造成问题的原因。你应该只用css和没有内联样式的html **来提一提，然后将它发布到你的问题中。 – jmargolisvt
试过了，但它仍然没有解决问题。 :( –