Screenshot of what is happening:
It is just a list item within an underordered list, this is happening in IE7 and nowhere else.
<ul>
<li>Filler text. 开发者_开发技巧Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li>
</ul>
.fancybox-entry.computer-policy li {
float:none;
width:100%;
list-style-type:disc;
margin-bottom:10px;
}
.fancybox-entry.computer-policy ul + p {
margin-bottom:20px;
}
.fancybox-entry.computer-policy ul {
margin:5px 0 10px 25px;
}
Any help as to why it is doing that and a fix is appreciated.
It appears that the width CSS property triggers hasLayout for the li
element in IE7. First try removing the width:100%;
declaration to make sure the bullet appears in the correct place. If you can't do without the width property, you can use position: relative;
and vertical-align: top;
to move the bullet back into place, as outlined at http://www.gunlaug.no/tos/moa_26.html.
Note that the code on that page uses hacks to target IE6 and IE7. I recommend using conditional comments instead, like so:
<!--[if IE 7]>
<style type="text/css" media="screen">
/* IE7-specific CSS here */
</style>
<![endif]-->
My reputation is still too low to comment, otherwise I would have added this to peterjmag's answer. (Maybe he can include it...)
The width property is the culprit, but I would suggest a different change. To make sure your list elements take up full-width in IE7, use "width:auto" instead. This will give you the same look and your bullet points will take their proper place. I have found that "vertical-align:top/text-top" pushes the bullet points just a little north of where I would like them.
If you don't have conditional classes or an IE stylesheet, just use "*width:auto" to target IE7.
精彩评论