我制作了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);"> </a></div>
<div class="carousel-button-right"><a href="javascript:void(0);"> </a></div> -->
<div class="carousel-wrapper">
<div class="items-wrap">
<div class="carousel-items">
<div class="see-all"><a href="#">Смотреть всех детей →</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="#">Подробнее →</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;
}