无法摆脱自定义滚动条和DIV之间的额外空间

时间：2013-05-26 18:44:56

标签： html css scrollbar

正如你在附带的图片上看到的（这里也是a link看到现场版本）我的自定义蓝色滚动条和我的文章蓝框之间有2-3个像素的额外空间。无法弄清楚它来自哪里。任何的想法？感谢

enter image description here 

/* 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>

1 个答案:

答案 0 :(得分：1)

您应该在margin-right - -3px周围添加-4px，并且可以看到溢出

尝试使用样式article 

.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: visible;
box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.5);
margin-right: -4px;
}

提醒，删除最后一句话：<img src="images/tel-icon.png"">

相关问题
最新问题