Modified SBMH (Simplified Box Model Hack)

Modified SBMH (Simplified Box Model Hack)

The technique discussed here is a modification of the Simplified Box Model Hack. As with the SBMH this variant is intended to provide IE5.x/Win and it alone a width value of its own to compensate for its erroneous implementation of the CSS Box Model. Test your browser now to see how it reacts to the hack.

The technique exploits a bug that exists in IE browsers versions 5 and up (both for MS Windows and the Mac). [1] Tests show that IE has the star html selector bug which is a CSS selector that does not match any element in a valid HTML or XHTML document. Be that as it may it is nevertheless a valid CSS selector. The inclusion of the star html selector is the modification in the 'standard' SBMH. As with the SBMH the character escape mechanism is utilized to hide width values from IE5.x/win.

The following is the basic syntax of the modified SBMH:

* html <selector>  /* this is recognized by IE only */

 {

  width: <value>;  /* total width, only for IE5.x/Win */

  w/idth: <value>; /* content width for other IE */

  }

<selector>

  {

  padding: <value>;

  width: <value>;  /* content width for other browsers */

  }

The selector of the first rule is meant to be recognized only by IE. It utilizes the star html selector. The first declaration in the rule supplies IE5.x/Win its width value. But since other IE versions which do not have the box model bug will also pick up this value the second declaration is necessary to serve them the correct width. This second declaration has the escape character (backslash) embedded in the middle of the property name, thus, making it "invisible" to IE5.x/Win only. Character escapes are recognized by IE6/Win and IE5/Mac. Keep in mind that the backslash cannot appear before the first letter of the property since IE5.x/Win understands that. Furthermore, the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers.

The second rule above is recognized by all CSS-aware browsers. [2] All the properties declared here are for all browsers including IE. The only values which IE will not apply from this rule will be width values since the first rule has a higher specificity. And because of this difference in specificity placement of these two rules relative to one another is irrelevant. Either one can precede the other.

Check how your browser reacts to the modified SBMH on this test page

Comparison of the SBMH and its Modified Form

One serious side effect of the character escape technique of the SBMH is that it wreaks havoc in certain browsers. NS4.x, for example, ignores the entire stylesheet—the page is rendered without any CSS at all. Thus, if NS4.x is to be served the same style sheet some way of hiding the escape is necessary. This is the reason the Caio Hack is employed at times.

Opera 5, on the other hand, ignores all the declarations in the rule in which the escape is found. Because it will disregard any rule set that contains a character escape (whether on the first letter of the property or not) at least two (maybe even three), nearly identical, rules with the same selector must be specified: one with an unescaped width and another (or two) with an escaped width.

Therefore, while using escapes is a simple and elegant solution, the necessity of adding another hack to hide the SBMH from NS4.x or specifying several rules defeats its initial simplicity.

One advantage of the modified form of the SBMH is that it effectively hides any escapes from browsers (other than IE) that may have difficulty with them. When a browser (other than IE) reads the star html selector it will not find any matching element in the markup and will simply move on to the next rule. It will not bother reading the declaration block. Therefore, such browsers as Opera 5 and NS4.x are effectively shielded from w/idth.

Moreover, the modified SBMH is obsolescence-proof. If and when the star html selector bug finally is fixed by Microsoft the hack will not have any negative impact on the browser. Just like Mozilla or Opera 6 for instance the hypothetical new IE without the star html bug will simply ignore the entire rule and pick up the width from the other rule. And since this new IE will presumably be implementing the correct box model (IE6 and IE5.x/mac do so already) all will be as it should be.

Other Applications

Like the SBMH its modified form can be used to supply IE5.x/Win (or IE for Windows and the Mac in general) its own set of values for properties other than width. For instance the footer text on this page uses this technqiue to supply IE5.x/Win its own fractional font size. Because this browser displays a text much larger than other browsers I decided to serve it its own value. The CSS used for the footer is as follows:

div#footer p

  {

  margin: 0 30% 0 0;

  padding: 0.5em 2em 0.5em 10%;

  background: #eee;

  font-size: 90%;

  }

* html div#footer p

  {

  font-size: 75%;   /* for IE5.x/win */

  f/ont-size: 90%;  /* for other IE versions */

  }

Notes

1. Tests show this bug is present in the following IE browsers: IE5.0/Win, IE5.5/Win, IE6/Win, IE5.1/mac.
2. Strictly speaking this depends on the selector used since some browsers still don't recognize, among others, the universal selector, certain combinators, attribute selectors, and some pseudo-classes

   ================================================================================

 

先温习一下对于 IE 的 box-model 的破解
IE box-model 这个臭名昭著的 bug 存在于 IE6/Win 以前的每一只版本，这个虫子直到 tantak 发布了流传最为广泛的那个 hack 才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5.X/win 对 box-model 的解析是一样的，他们认为 width 包括了边框 (border) 和补白 (padding) ， 幸运的是这个情况在 IE6 中有了好转
但是 IE6 在向后兼容的同时也包容了以前的错误， IE6 其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型 (DOCTYPE) 声明， IE6 才能够接受正确的 box-model
所以， tantak 的 hack 必须和正确的 DOCTYPE 同时包含在文档中才能够正常工作

（ 1 ）

div.content {     width:400px;                // 这个是错误的 width ，所有浏览器都读到了     voice-family: "/"}/"";     //IE5.X/win 忽略了 "/"}/"" 后的内容     voice-family:inherit;     width:300px;            // 包括 IE6/win 在内的部分浏览器读到这句，新的数值 (300px) 覆盖掉了旧的 } html>body .content {        //html>body 是 CSS2 的写法     width:300px;                // 支持 CSS2 该写法的浏览器有幸读到了这一句 }

（ 2 ）现在回到主题，我们经常看到 !important 和 ( 空格 )/**/: 组合在一起使用，这个写法有什么奥妙呢？
看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果

div.content {     width:300px !important; // 这个是正确的 width ，大部分支持 !important 标记的浏览器使用这里的数值     width( 空格 )/**/:400px;   //IE6/win 不解析这句，所以 IE6/win 仍然认为 width 的值是 300px ；而 IE5.X/win 读到这句，新的数值 (400px) 覆盖掉了旧的，因为 !important 标记对他们不起作用 } html>body .content {        //html>body 是 CSS2 的写法     width:300px;                // 支持 CSS2 该写法的浏览器有幸读到了这一句 }

同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。
（ 3 ）使用反斜杠技术

body {       font-size:small; // 这个是正确的 width } * html body // 由于 IE 中的一个 bug ，可以通过 *html 选择器 来提供专门用于 IE 的浏览器声明 {       font-size:x-small; /*for IE5/Win*/       f/ont-size:small; /* for other IE Versions*/   //IE5/WIN 忽略 font-size 属性中的反斜杠，因此可以放心的为他们设置 x-small 值，然后，针对其他版本的 IE ，再用 small 值将 x-small 值覆盖掉。 }