CSS text-select cursor ie7, strange behavior

Question

Strange one here, hoping to get some feedback to point me in the right direction.

If my #wrapper or any of the child divs do not have a background-color applied to them, ie7 changes the normal "pointer" cursor into a "text-select" cursor when mousing around the page (whether mousing over text or not).

I thought I had fixed the problem a while back, but when I remove the background-color from my #wrapper or any of the children divs, the problem reappears.

Just looking for some hints or what I should be checking.

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

EDIT:

Seems to be because the divs "hasLayout", but I'm still not sure how to fix it. See this link.

EDIT 2:

I can't find any more info on this "ie7 bug." Anyone who has any ideas, or even if you're aware of this bug and can just let me know so I know I'm not crazy. I'm getting really frustrated with Microsoft again. Already cost me an extra few hours of work this week. Seems like it never ends.

EDIT 3:

Here's another link of someone having the same problem.

EDIT 4:

STACKOVERFLOW.com suffers from this bug! So does mashable.com. I guarantee MANY web devs have this bug on their site and they don't even know it.

Check it out for yourself... hover your cursor around the page of either site. Notice it turns to a text-select cursor when it shouldn't.

Seems like it would be easy to fix with the cursor property, but the problem would be triggering proper text-select-cursor behavior when required.

Answer 1

Is it too hacky to explicitly state what cursor should go where?

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

etc..

Answer 2

I'm pretty sure I have encountered it before, but it's probably a bit too subtle to really notice during some superficial browser testing. But I've certainly also had issues fixed by setting a background color.

As far as I can tell, the best way to fix it is to position the element causing the problems, or add a positioned wrapper div around it. You would most likely use position: relative, though absolute and fixed should work too.

Positioning the element itself usually works, but adding a wrapper div might work more consistently.

E.g. adding position: relative to the .post-text class fixes the cursor on the questions and answers on this page.