Firefox/chrome... CSS hack debugging

CSS hack debugging in Firefox/chrome... Release Date: 11:23:00 views: 483 comments: 7

In the past few days, rewrite the HTML and CSS of the School Council website. It seems that Firefox and Safari do not support margin-top and margin-bottom. The strange thing is that margin-left and margin-right can display the page blank normally. After debugging for a long time, I suddenly remembered that a senior engineer seemed to have mentioned this to me. Then I went to my mind, used padding, and tested it on Firefox and Safari. I was so happy that I did not forget to open ietester again. I tested it with IE6 and found that the margin was more than twice the value I set. Why, I haven't figured it out yet (if you have any experts, please kindly advise ). I thought for a long time, and even thought it would be an ietester problem. If I switched to IE6, it may not be the result. Unfortunately, I installed IE8 and wanted to test it on IE6, it is still quite troublesome, so I am ready to give up. I opened the 360 security browser and tried it. I also found this problem. Therefore, we decided to solve the problem in any case.

Blindly search for the keyword "Firefox CSS Tag" on the Internet (because this problem was first found on Firefox, I decided to first get started from Firefox according to the elimination strategy one by one ), after reading a few articles, I found CSS hack. I carefully looked at it and found that the strategy I used to break through is very insightful, because it is obviously the result that the standard CSS cannot be compatible with the display effects of various browsers, so I can only use CSS hack (exclusive mark).

If you use the margin-top tag, the IE6 and 360 security browsers can display them normally. Therefore, the original CSS Tag still uses the margin-top tag. For Firefox and Safari, CSS hack is used to solve the problem, the CSS code is written as follows:

. Right_pic {

Margin-top: 10px;

}

@-Moz-document URL-prefix (){

. Right_pic {

Padding-top: 10px;

}

}

@ Media screen and (-WebKit-Min-device-pixel-ratio: 0 ){

. Right_pic {

Padding-top: 10px;

}

}

Here, right_pic is the DIV identifier that I need to use. It was tested on Firefox and Safari, and displayed perfectly. (Note: A funny thing happened here: I suddenly remembered that I have not installed safari. How can I have a safari in the previous article? That's weird !! After checking it out, something funny happened. I used to treat Google Chrome as safari, which is ridiculous. However, this absurd incident inadvertently gave me an understanding of CSS hack (@ media screen and (-WebKit-Min-device-pixel-ratio: 0) in safari )) the same applies to Google
Chrome, which is why I have discovered that safari and chore are mixed up. But does this mean Google Chrome and Safari have similar kernels? I don't know, haha ......)

OK, remember the funny thing, and continue with the text. Then I found that CSS hack can make the margin look normal, and I am excited in my heart, open the 360 security browser and ietester. the test in IE6 is also normal ...... I suddenly remembered that I still had an Internet Explorer 8. For some unknown reason (maybe Internet Explorer 8 is annoying), this browser has always been out of the Cold palace, and I almost never use it at ordinary times. Of course, to test the page, I still need to use it. So I opened the page and found the same problem on the page displayed by the browser, I know that CSS hack of IE8 is still relatively easy to write, for example:

HTML> body. right_pic {

Padding-top: 10px;

}

I tried it. OK! I checked my labor results with the feeling of the winner, and found that Firefox, Google Chrome, IE6, and IE8 (IE7 was inexplicably unavailable on my ietester and depressed, I hope it will be almost the same as IE8). When I open the 360 security browser, the problem has arisen again. The margin is twice the set value ......

When I thought about it, I thought it should be the 360 secure browser that is compatible with the IE6 kernel and IE8 kernel, so HTML> body. right_pic is also valid on the 360 security browser. When margin 10px is added with padding 10px, the result is 20px in appearance, which is twice as big as expected. I searched the internet and found that I can write this for IE:

<! -- [If IE 7]>

<Style type = "" text/CSS "">

</Style> <! [Endif] -->

<! -- [If IE 6]>

<Style type = "" text/CSS ""> </style>

<! [Endif] -->

Of course, for IE8, you can change 7 to 8. It's amazing.

To sum up, this is actually the result of the chaotic browser kernel. If Firefox, ie ...... If we sit down and talk about a protocol, it won't be so hard to write CSS. In order to be compatible with various browsers, We have to write a lot of redundant code, this greatly reduces the efficiency of information transmission and is obviously inconsistent with the current concept of energy conservation. However, I thought about it in turn and thought that if a protocol was made, wouldn't everyone be able to write CSS? Is it difficult for a web designer to eat at that time ?! Perhaps at that time, it was really all about Personal Aesthetic and design capabilities, rather than code writing capabilities.

The world is like this. Some things are obviously not suitable for the world, but there are some reasons for existence. This principle involves the interests of some people, so that those people will not destroy it, and this unsuitable thing will still exist ......

This is the world ...... The real world ......

Original address: http://www.tengs.info/article.asp? Id = 63