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

Tests show this bug is present in the following IE browsers: IE5.0/Win, IE5.5/Win, IE6/Win, IE5.1/mac.

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.htmlIE5.X/win
はい
box-model
の解析は同じで、彼らは
width
枠線を含む
(border)
と補白
(padding)
,
幸いなことにこの状況は
IE6
中は好転した
でも
IE6
後方互換性と同時に以前のエラーを包容し、
IE6
実は2つのコアがあって、古いページの前で彼は依然として間違いに対する寛容さを示して、ドキュメントの中で厳格にドキュメントのタイプを加えます
(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
値が上書きされます.
}