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
試過了，但它仍然沒有解決問題。 :( –