Front-end CSS compatibility ideas and CSS compatibility ideas

Front-end CSS compatibility ideas and CSS compatibility ideas

At this time, I encountered the problem of a rounded border. The previous Code was to write a fixed div on each page and use the background image to implement the rounded border. The code structure is roughly as follows:

.top_border{background:url(topborder.png);}.left_border{background:url(leftborder.png);}.right_border{background:url(rightborder.png);}.bottom_border{background:url(bottomborder.png);}

<div>      <div class="top_border"></div>      <div class="left_border"></div>     <div class="content">　　　　...     </div>      <div class="right_border"></div>      <div class="bottom_border"></div><div>

During refactoring, I directly changed this structure to the most simplified version.

<div class="content"></div>

There is a problem here: boder-radius can be used to implement a rounded border, but IE7 and IE8 are not supported.

At that time, I thought that my specification was correct, so I hope to achieve IE7/IE8 compatibility without modifying the HTML code structure.

Search for IE7/IE8 solution: http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

Based on this, js is used for compatibility with IE7/IE8. The main code logic is as follows:

If (typeof (document.doc umentElement. style ["border-radius"]) = "string") // you can specify whether the image supports {$. fn. extend ({// implement the rounded border borderRadius: function (r) {var B = this. wrap ("<div> </div> "). parent (); // the following code mainly uses logic rather than actual code execution, for the implementation of four-corner border-radius = 5 // adjust the margin and width to conform to the layout B .css ({margin: this.css ("margin"), "width": this. clientWidth}); this.css ({margin: "0"}); var borderColor = this.css ("border-color ");
Var background = this.css ("background-color"); var borderStyle = this.css ("borer-style"); // reset the border, retain only the border this.css ({"border-top-width": "0", "border-bottom-width": "0"}) on both sides "});//
// Create an HTML structure and implement the upper and lower border var setting = {m: [,], bw: [,]}; var I = 0; (; I <3; I ++) {var t = $ ("<B>" ).css ({"height": 1, "margin ": "0" + setting. m [I] + "px", "border-left-width": setting. bw [I] + "px", "border-right-width": setting. bw [I] + "px", "border-color": borderColor, "background-color": background}); B. append (t); B. prepend (t. clone (true);} var t = $ ("<B>" detail .css ({"height": 1, "margin": "0" + setting. m [I] + "px", "border-width": "0", background-color ": borderColor}); B. append (t); B. prepend (t. clone (true) ;}}); $ (". content "). borderRadius (5); // set the rounded corner $ (". border1 "). borderRadius (5 );}

Although the HTML structure at run time has changed, the HTML structure at encoding time has not changed. This is a compatible method.

I still remember that JavaScript has previously processed compatibility with some other pseudo classes and listed them together:

Scenario: move the cursor to display the level-2 menu.

Common Practice:

.menu{}.menu li ul{display:none;}.menu li:hover ul{display:block;}

<Ul class = "menu"> <li> <a> Level 1 </a> <ul> <li> <a> Level 2 </a> </li> <li> <a> Level 2 </a> </li> </ul>

When IE6 is not supported, you can adjust it.

. Menu {}. menu li ul {display: none;}. menu li: hover ul,. menu li_hover ul {display: block;}/* added a style name */

Added compatibility with JS

If (not supported: hover)
{
$ (". Menu li "). hover (function () {$ (this ). addClass ("li_hover") ;}, function () {$ (this ). removeClass ("li_hover ");})
}

Add the following JS to be compatible with the touch screen

If (touch screen) {$ (". menu li"). click (function () {var isHover = $ (this). hasClass ("li_hover"); if (! IsHover) {$ (this). addClass ("li_hover") ;}else {$ (this). removeClass ("li_hover ");}});}