Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?

Question

Is it possible, for example, to have a div that completely ignores CSS rules, no matter what classes and ids it contains?

Answer 1

Nope, this is (sadly) not possible without an iframe.

You would have to reset every existing CSS rule for that div like so:

div.sandbox
 {
    font-size: ....
    font-family: ..........
    margin: .........
    padding: .........
    line-height: .........
  }

while difficult and never 100% reliable, it might be possible to achieve a usable result this way. You could look at one of the "reset stylesheets" like Eric Meyer's to get a list of important properties to reset; here is what claims to be a complete list of CSS 2.1 properties - excluding CSS 3 and vendor specific ones, which you would have to take into consideration as well.

Providers of 3rd party widgets often hard-code their "reset CSS" as inline CSS inside the HTML element to override any !important rules that threaten to override the sandbox class's rules.