开发者

IE8 CSS Complications

开发者 https://www.devze.com 2022-12-17 06:05 出处:网络
Greetings, I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.

Greetings,

I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.

Is this a know problem or an isolated issue?

My main probl开发者_如何学编程em stems from trying to lock a header into place while allowing the body to be scrollable with:

position: fixed;
overflow: scroll;
top: 135px;
left: 0px;

One of my colleagues has also encountered the same issue as I have.

Any assistance would be greatly appreciated.

Thank you,

Jordan Trulen

.belt
{
    position:fixed;
    top: 0px;
    left:0px;
}
.header-table
{
    position:fixed;
    top:65px;
    width:100%;
}
.header
{
    position:fixed;
    height:40px;
    width:98%;
    top:95px;
}
.body
{
    position:fixed;
    overflow:scroll;
    height:74%;
    width:99%;
    top:135px;
}


You're not giving us any html or a link to see what's up.

But there's a key difference in using position:fixed and position:absolute.

  • Fixed is used when you don't want the container to scroll with the page, but remain at that position no matter how much you scroll the remaining page. This is good for headers that should always be visible.
  • Absolute should be used when you just want it to be fixed in relation to the surrounding content.

And you're using overflow:scroll; in a fixed container, which only in extremely rare cases makes sense. I think you problem is with the overflow:scroll; being on the wrong tag. It only has to do with the content of that tag being limited to the width and height (which you haven't even specified!) of the container. If the content overflows that width and height, scrollbars are inserted ON the container.


Why are you using position fixed on the "content" area (i assume thats the "content" area as scroll on a header doesnt make much sense)? Apply position: fixed; to the header instead.

0

精彩评论

暂无评论...
验证码 换一张
取 消