IE7中的Javascript滑块似乎有误

时间:2014-03-05 07:45:18

标签: javascript html css

我制作了JS滑块,这样当我点击其中的图像时,这个图像会增加。除IE7外,所有浏览器中的图像增加似乎都是正确的。我能做些什么,在IE7中也是正确的?在此先感谢并且因为英语不好而感谢sory。 正确反思:http://gyazo.com/f56ac573b95879da52b51b97fd2b0adb

ie7:http://gyazo.com/59d8965c569544a7dbd554236dcb0e7a

<div class="wrapper_slider">
        <div class="carousel">   
        <!-- <div class="carousel-button-left"><a href="javascript:void(0);">&nbsp;</a></div> 
        <div class="carousel-button-right"><a href="javascript:void(0);">&nbsp;</a></div> -->                       
            <div class="carousel-wrapper">
               <div class="items-wrap">
               <div class="carousel-items">
                  <div class="see-all"><a href="#">Смотреть всех детей &rarr;</a></div>
                  <div class="carousel-block">
                        <img src="images/1.jpg" alt="" width="156" height="114"/>
                        <div class='full_size_img'>
                                <div><img src="images/41.jpg" width="321" height="239"/></div>
                                <div class="name"><a href="#">Даниил Королев</a></div>
                                <div class="wrap-descript">                            
                                <p>Учится играть заново. Он уже и забыл, каково это быть дома, ведь долгие 1,5 года мальчик провел в больнице...</p>
                                <p>Нужно собрать:</p>
                                <div class="price">
                                    <p><span>1 000 500р.</span> до 23.10.12</p>
                                </div>
                                <div class="will">                                        
                                    <a href="#">Я хочу почь</a>
                                </div>
                                <div class="detailer"><a href="#">Подробнее &rarr;</a></div>
                                </div>
                        </div>
                  </div>

.wrapper_slider {
height: 487px;
width: 100%;
/*border: 1px solid blueviolet;*/
position: absolute;
top:149px;
left:0px;
}
.carousel{
height: 480px;
width: 100%;
/*border: 1px solid #0fa628;*/
}
    .carousel  {
   width: 100%; /* ширина всего блока */
   margin: 5px auto;
}
.carousel-wrapper {
   width: 100%; /* ширина области карусели */
   overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
   margin:0px;
   padding:0px;
   position:relative;
   /*border: 1px solid #d91513;*/
   top: -1px;
}
.carousel-items {
   background: url(../img/slider-bg.png);
   width: 10000px; /* устанавливаем большую ширину для набора элементов */
   position: relative; /* позиционируем блок относительно основной области карусели */
   left:-115px !important;
   /*border: 1px solid #b3d4fc;*/
   height:203px;
   /*margin-top:108px;*/
   padding-top:65px;
}
.see-all a{
    display: block;
    text-decoration: none;
    background: url(../img/bg-all.png) repeat-x;
    position:absolute;
    left:1053px;
    top:-14px;
    width:175px;
    height:26px;
    border-radius: 13px;
    text-align: center;
    color:#fff;
    line-height: 29px;
    behavior: url(PIE.htc);
}
.items-wrap{
    height:331px;
    position:relative;
    padding-top: 108px;
}

.block{
    display: block !important;
}
.full_size_img .carousel-block{
    position: absolute;
}
.carousel-items .carousel-block .full_size_img{
    display: none;
    line-height: 1.5;
    z-index: 9999;
    left: -127px;
    top: -278px;
    padding: 10px 9px;
    border-radius: 7px;
    height: 465px;
    width: 377px;
    position:relative;
    background: #fefefe;
    border: 1px solid #361308;
    text-align: center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    behavior: url(PIE.htc);
    zoom: 1;
}
*+html .full_size_img{
    z-index: 9999;
}
.full_size_img .name{
    background: #edeeec;
    opacity:0.7;
    color:#361308;
    height:42px;
    font-family: "Verdana", sans-serif;
    font-size:14px;
    font-weight: bold;
    line-height: 3;
    width: 321px;
    position:absolute;
    top:207px;
    left: 27px;
}
.full_size_img .wrap-descript{
    padding: 0 18px;
}
.full_size_img .wrap-descript>p{
    padding: 0 5px;
}
.full_size_img .wrap-descript .price{
    padding: 5px 0 0 34px;    
}
.full_size_img .wrap-descript .price p span{
    font-weight:bold;
    font-size:18px;
}
.full_size_img a:hover{
    text-decoration: none;
}

.full_size_img a{
    font-size: 14px;
    font-weight: bold;
    color: #191919;
}
.full_size_img .will a{
    display:block;
    text-decoration:none;
    /*background: #fff4e9;*/
    background: #fff4e9 url(../img/will-btn.png) repeat-x center bottom;
    height:53px;
    border-radius: 10px;
    font-family: "OfficinaSansBoldC", sans-serif;
    font-size:27px;
    line-height:52px;
    text-align: center;
    color:#fff;
    width:322px;
    margin-top:7px;
    margin-bottom:4px;
    font-weight:bold;
}
.full_size_img .detailer a{
    font-family: "Verdana", sans-serif;
    font-size: 11px;
    color:#0195A9;
    font-weight:normal;
}
.full_size_img p{
    padding-right: 46px;
    margin: 5px 0;
}
.items-wrap img.carousel-button-left {
    position: absolute;
    left: 198px;
    bottom: 31px;
    cursor:pointer;
}
.items-wrap img.carousel-button-right{
    position: absolute;
    bottom: 27px;
    right:190px;
    cursor:pointer;
}
.carousel-block {
   float: left; /* выстраиваем все элементы карусели в ряд */
   width: 156px; /* задаём ширину каждого элемента */
   padding: 10px 10px; /* делаем оступы, чтобы элементы не сливались */
   position:relative;
}

.carousel-block>img:hover{
   width: 170px;
   height:125px;
   position:absolute;
   margin:auto;
   top:7px;
   left:0;
   right:0;
   cursor:pointer;
}

/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
   width: 25px; 
   height: 36px; 
   position: absolute;
   top: 80px; 
   cursor: pointer; 
   text-decoration:none;
}
.carousel-button-left a{
   float: left; 
   background: #105cb6 url(../images/carousel-left.png); 
   left: 152px;
    top: 103px;
    z-index: 100;
}
.carousel-button-right a{
   float: right;
   background: #105cb6 url(../images/carousel-right.png); 
   left: 58px;
    top: 104px;
    z-index: 100;
}

0 个答案:

没有答案