问题
I'm having a problem with floating a container to the right in IE7. Everything looks fine in IE8+, Firefox, Chrome, and Safari but the elements within the container wrap for some reason in IE7.
I've set up a fiddle at http://jsfiddle.net/aagC9/. The problem I'm seeing is visible in the IE7 Browser Mode/Document Mode found in IE9 (it's also in IE7 on XP but I figured this would be easier for people to check out).
While it seems like many people have run into similar problems, their solutions haven't worked for me. I've tried adding overflow: hidden and overflow: visible to both the container and elements in various combinations. I also tried setting a fixed width on the .message container, but that didn't seem to have any effect either. While I could just use a fixed left margin on .message, it doesn't work 100% since the IE7 doesn't support the box-sizing model.
Does anybody know the secret to getting this to work in IE7 with the float?
Thanks!
回答1:
It has to do with your reliance on display:inline-block; which IE7 supports, just not always correctly. Actually, fix for it is pretty gross. But, as in this updated fiddle, it works.
来源：https://stackoverflow.com/questions/11571078/floating-a-div-right-causes-elements-to-wrap-in-ie7