我一直在开发一个比以前更复杂的css设置网站,而且Internet Explorer以最疯狂的方式表现:
在this page(http://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了......
任何帮助都会对我的神经有益。