Is there a way to work around the following bug. I have a slideshow object whose images can resize to fit. The implementation is to set them up in a list
<div class="frame">
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
<ul>
</div>
The relevant css
.frame {
width: 100%;
}
.frame >ul {
position: relative;
white-space: nowrap;
}
.frame >ul >li {
position: relative;
display: inline-block;
}
.frame >ul >li >img {
width: 100%;
height: auto;
}
Works just fine in IE 8, 9 and Firefox. If I remove the whitespace call it will work in webkit too, at the cost of having all the inline elements show up as a stack in all browsers.
Since I need to use javascript to animate the elements anyway, I’ll probably fix this by having javascript force the computed width onto the images for webkit at run time :\ Still, this is annoying.