IE7 float right causes parent element to take up f

2019-07-23 05:36发布

I am completely baffled by this and don't fully understand IE7's problem. The page in question is here and I'm talking about the top grey menu bar. On all other reasonably modern browsers it looks just fine. On IE7 (and possibly IE6 too, but we don't support that) the div.navArrow element having float:right gets pused all the way to the right, making the parent element <li> take up the remaining width of the page.

I'm not sure where to start in fixing this. Any ideas please?

3条回答
该账号已被封号
2楼-- · 2019-07-23 06:08

I have actually fixed this by applying an special css for IE7 and below. I gave the parent <li> a float:right style, and div.navArrow a float:none. That seemed to do the trick.

查看更多
The star\"
3楼-- · 2019-07-23 06:08

Meybe will help you to use any kind. By experience I know that what position: relative; don't fix, you can fix it with zoom: 1; in IE7. Facebook uses this clearfix:

.clearfix{
    zoom: 1;
}
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

If doesn't matter that the content don't flow out of the container, you can set the container with overflow: hidden; and that use to work pretty fine.

查看更多
欢心
4楼-- · 2019-07-23 06:18

There is a space before your DOCTYPE and is what is most likely triggering this issue. Also, define a proper DOCTYPE (such as <!DOCTYPE html>) and validate your page, its full of errors.

http://validator.w3.org/check?uri=http%3A%2F%2Fmpreview.ami.co.nz%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

查看更多
登录 后发表回答