正如您在所附图片上看到的（这里也是查看实时版本的链接），我的自定义蓝色滚动条和我的文章蓝色框之间确实有 2-3 像素的额外空间。无法弄清楚它来自哪里。任何想法？谢谢
/* Reset
/* -------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
b, strong {
font-weight: bold;
}
em {
font-style: italic;
}
/* Font family reference
/* -------------------------------------------- */
/*
font-family:'FuturaW01-LightOblique';
font-family:'Futura W01 Book';
font-family:'Futura W01 Book Oblique';
font-family:'Futura W01 Medium';
font-family:'Futura W01 Heavy';
font-family:'Futura W01 Bold';
*/
/* Global
/* -------------------------------------------- */
html, body {
width: 100%;
height: 100%;
min-width:950px;
}
body {
margin: 0;
padding: 0;
font-family: 'Futura W01 Book', Arial, sans-serif;
font-size: 14px;
line-height: 1.285714286; /* 18px */
color: #2b2b2b;
-webkit-font-smoothing: antialiased;
z-index: 0;
position: absolute;
/* background: url(../images/biographie.jpg); */
background: url(../images/tigramback.jpg);
top: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position:fixed;
}
#container {
width:100%;
height:100%;
}
a {
outline: none;
color: #2b2b2b;
text-decoration: none;
}
.menu li a {
font-family: 'Futura W01 Heavy', Arial, sans-serif;
font-size: 10px;
line-height: 1;
letter-spacing: 0.10em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid #3B5898;
}
.menu li a:hover, .menu li.selected a {
border-bottom: 1px solid #fff;
}
/* Fade border under links on hover */
.csstransitions .menu a, .csstransitions .footer a {
-webkit-transition: border, color 0.2s ease-out;
-moz-transition: border, color 0.2s ease-out;
-ms-transition: border, color 0.2s ease-out;
-o-transition: border, color 0.2s ease-out;
transition: border, color 0.2s ease-out;
}
p a {
border-bottom: 1px solid #3B5898;
}
p a:hover {
border-bottom-color: #fff;
}
h1, h2 {
text-transform: uppercase;
}
h1 {
font-family: 'Futura W01 Heavy', Arial, sans-serif;
font-size: 20px;
letter-spacing: 0.04em;
margin-bottom: 1em;
padding-top:5px;
}
h2 {
font-family: 'Futura W01 Heavy', Arial, sans-serif;
font-size: 16px;
letter-spacing: 0.04em;
margin-bottom: 1em;
padding-top:5px;
}
h3 {
font-family: 'Futura W01 Heavy', Arial, sans-serif;
font-size: 12px;
margin-top: 14px;
font-weight: bold;
margin-bottom: 1em;
}
p {
font-size: 14px;
margin-bottom: 1.25em;
}
strong, b {
font-family: 'Futura W01 Heavy', Arial, sans-serif;
font-weight: bold;
}
img {
max-width: 100%;
border: 0;
-ms-interpolation-mode: bicubic;
}
/* Navigation
/* -------------------------------------------- */
.menu {
position: fixed;
top: 0;
width: 100%;
min-width: 768px;
max-width: 1950px;
margin: 0 auto;
height: 65px;
z-index: 310;
color: #2b2b2b;
background-color: transparent;
background-image: url('../images/shadow-menu.png');
background-position: 100% 100%;
background-repeat: repeat-x;
padding-bottom: 5px;
}
.menu .inner {
height: 65px;
width: 100%;
background: #fff;
overflow: hidden;
text-align: center;
}
.menu .logo {
position: absolute;
left: 81px;
top: 19px;
}
.menu ul {
display: inline-block;
margin: 18px auto 0 auto;
position: relative;
float: right;
padding-right: 200px;
}
.menu li {
float: left;
margin-right: 30px;
margin-top: 10px;
}
.menu li:last-child {
margin-right: 0;
}
.menu li a {
float: left;
}
.menu .pipe {
width: 1px;
float: left;
height: 33px;
padding-left: 30px;
position: relative;
top: -10px;
background: url('../images/pipe.gif') 100% 0 repeat-y;
}
/* Search */
.social {
position: absolute;
right: 50px;
top: 13px;
text-align: right;
}
.social ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.social li {
margin: 2px;
}
/* Article - white bg */
.article-intro{
clear: right;
float: left;
text-align:justify;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
border-top-left-radius: 35px;
width: 10px;
height: 150px;
margin-left:150px;
position: relative;
z-index: 15;
margin-top: 90px;
opacity:0.95;
}
.article {
clear: right;
float: right;
text-align:justify;
color:#FFF;
opacity:1;
width: 550px;
padding: 20px 32px 25px 50px;
position: relative;
z-index: 15;
margin-top: 46px;
background: #3B5898;
overflow:scroll;
/* box-shadow:2px 0 5px 0 rgba(0, 0, 0, 0.5);*/
box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5);
}
.article .imgShadow{
border:none;
margin-top:-9px;
}
.icons {
position: absolute;
right: 100%;
top: 0;
}
.icons ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.icons li {
margin: 0 100px 5px;
}
.article p {
padding-right:20px;
}
.article h1, .article h2 {
margin-top: -4px;
padding-bottom: 2px;
}
/* Footer
/* -------------------------------------------- */
.footer {
position: fixed;
z-index: 300;
bottom: 0;
width: 100%;
min-width: 768px;
max-width: 1950px;
margin: 0 auto;
background: #fff;
height: 40px;
}
.footer-hotnews {
background: #3B5898;
color: #fff;
font: italic normal 18px Georgia, serif;
text-decoration:none;
height: 38px;
width: 200px;
padding-top: 8px;
display: block;
text-align: left;
padding-left: 50px;
float: left;
}
.footer-copyrights {
color: #333;
text-decoration:none;
height: 38px;
font-size:12px;
padding-top: 14px;
display: block;
text-align: right;
padding-right: 50px;
float: right;
}
.hot_news {
color: #fff;
text-transform: uppercase;
/* border-bottom-color: #2b2b2b; */
}
.hot_news:hover {
background-color: #e34732;
}
.footer a:hover {
border-bottom-color: #ECB825;
}
.jspContainer {
overflow: hidden;
position: relative;
}
.jspPane {
position: absolute;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
background: red;
}
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: red;
}
.jspVerticalBar *, .jspHorizontalBar * {
margin: 0;
padding: 0;
}
.jspCap {
display: none;
}
.jspHorizontalBar .jspCap {
float: left;
}
.jspTrack {
background: #ffffff;
position: relative;
}
.jspDrag {
background: #3B5898;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
float: left;
height: 100%;
}
.jspArrow {
background: #ffffff;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled {
cursor: default;
background: #ffffff;
}
.jspVerticalBar .jspArrow {
height: 30px;
}
.jspHorizontalBar .jspArrow {
width: 30px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus {
outline: none;
}
.jspCorner {
background: #eeeef4;
float: left;
height: 100%;
}
* html .jspCorner {
margin: 0 -3px 0 0;
}
HTML：
<div class="menu">
<div class="inner"> <a href="www.dfdsfdsfs.com/index.html" class="logo">Logo</a>
<ul>
<li > <a href="www.dfdsfdsfs.com">Category 1</a> </li>
<li > <a href="www.dfdsfdsfs.com">Category 2</a> </li>
<li > <a href="www.dfdsfdsfs.com">Category 3</a> </li>
<li > <a href="www.dfdsfdsfs.com">Category 4</a> </li>
<li > <a href="www.dfdsfdsfs.com">Category 5</a> </li>
<li class="selected"> <a href="www.dfdsfdsfs.com/">Category 6</a> </li>
<li > <a href="www.dfdsfdsfs.com">Contact</a> <span class="pipe"></span> </li>
</ul>
<div class="social">
<ul>
<li><img src="images/facebook-icon.png"></li>
<li><img src="images/linkedin-icon.png"></li>
<li><img src="images/youtube-icon.png"></li>
</ul>
</div>
</div>
</div>
<div id="container" class="scroll-pane">
<div class="article-intro">
<div class="icons">
<ul>
<li><img src="images/mail-icon.png"></li>
<li><img src="images/tel-icon.png""></li>
</ul>
</div>
</div>
<div class="article">
<div class="icons">
<ul>
<li><img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="50" height="50"></li>
<li><img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="50" height="50"></li>
</ul>
</div>
<img class="imgShadow" src="images/imgshadow.png">
<h1>Once upon a time</h1>
</a><h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a><h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p><strong>LOREM IPSUM</strong></p>
<h3>Tel. +123 456.789 - E-mail: contact@kjhhklh.com</h3>
<a class="lefticons" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side.">
</div>
</div>
</div>
<div class="footer">
<a href="#_" class="footer-hotnews">Prochains événements</a>
<a href="#_" class="footer-copyrights">Copyright 2013</a>
<div class="modern-ticker mt-round">
<div class="mt-news">
<ul>
<li><a href="#" target="_self">News 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news</a></li>
<li><a href="#" target="_self">News 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news</a></li>
<li><a href="#" target="_self">News 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news</a></li>
<li><a href="#" target="_self">News 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news</a></li>
<li><a href="#" target="_self">News 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news</a></li>
</ul>
</div>
<script type="text/javascript">
$(".modern-ticker").modernTicker({
effect: "scroll",
scrollInterval: 20,
transitionTime: 500,
autoplay: true
});
</script>
</body>