IE9图像悬停更改添加父Div高度

时间:2014-03-04 22:34:59

标签: html css internet-explorer internet-explorer-9

我一直在开发一个比以前更复杂的css设置网站,而且Internet Explorer以最疯狂的方式表现:

this pagehttp://www.movies.net63.net/)上,水平列表中的电影海报具有透明度,而且......当它们徘徊时,真的没什么别的。但出于某种原因,只要其中一个图像悬停, #movieList部分就会获得大约10-20px更高 - 或

这是一个示例html代码:

<section id="movieList" class="clear">
<div>
    <h2><span>TITLE</span></h2>
    <p class="hearts">
        <img src="../images/heartFull.png" alt="full-Heart" />
        <img src="../images/heartFull.png" alt="full-Heart" />
        <img src="../images/heartHalf.png" alt="half-full-Heart" />
        <img src="../images/heartEmpty.png" alt="empty-Heart" />
        <img src="../images/heartEmpty.png" alt="empty-Heart" />
    </p>
    <a href="../image/coverLarge.jpg">
        <figure class="cover" >
            <img src="../image/cover.jpg" type="image/jpg" alt="The Film's Poster" title="Click here to see full resolution." />
        </figure>
    </a>
    <figcaption>
        <p><strong>Categorie(s) :</strong> Category1, Category2, Category3...</p>
        <p class="summary"><strong>Summary :</strong> Short Summary.</p>
        <p><strong>Director :</strong> Director</p>
        <p><strong>Actors :</strong> Actor1, Actor2, Actor3...</p>
        <p><strong>Date :</strong> XXXX | <strong>Country :</strong> Country1, Country2...</p>
    </figcaption>
</div>
</section>

这是我正在使用的CSS(它是在多个文件中,所以我把它拼凑起来):

a, img {
    border: none;
    }
img {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    }
a, img {
    border: none;
    }
a img:hover {
    opacity:0.8;
    filter:alpha(opacity=80);
    }
a, a:visited {
    color: #ff9a57;
    text-decoration: none;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    cursor: pointer;
    }
a:hover {
    text-decoration: none;
    color: #ff6600;
    cursor: pointer;
    border: none;
    }
section[id$="List"] {
    margin: 0;
    max-height: 530px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    }
section[id$="List"] * {
    margin: 0;
    padding: 0;
    }
section[id$="List"] div {
    display: inline-block;
    display: inline !ie7;
    white-space: normal;
    width: 250px;
    height: 468px;
    margin: 8px 12px;
    padding: 5px;
    vertical-align:top;
    background: rgba(0,0,0,0.4) url(../images/headerBackgroundBlur.jpg) 50% 0 fixed;
    border-top-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 3px;
    }
section[id$="List"] div h2 {
    display: table; 
    height: 52px;
    width: 100%;
    font-size: 20px;
    }
section[id$="List"] div h2 span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
section[id$="List"] .hearts {
    text-align: center;
    }
section[id$="List"] .hearts img {
    margin: -2px;
    }
section[id$="List"] figure {
    height: 220px;
    text-align: center;
    margin: 5px 0;
    }
section[id$="List"] figcaption {
    font-size: 11px;
    }
section[id$="List"] figcaption .summary {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 90px;
    border-bottom: 1px solid #555;
    }

我真的越来越厌恶IE了......

任何帮助都会对我的神经有益。

0 个答案:

没有答案