Detailed introduction to web pages developed with JavaScript that are compatible with various browsers-JS Tutorial-php.cn

Detailed introduction to web pages developed with JavaScript that are compatible with various browsers

黄舟

Release： 2017-10-03 06:00:32

Original

1317 people have browsed it

This article mainly introduces the relevant information about javascript development web pages that are compatible with various browsers. Here are several methods to help you master such functions. Friends in need can refer to

javascript development Web pages are compatible with various browsers

Preface:

It is a commonplace issue that CSS is compatible with various browsers. There are tutorials all over the Internet. The following content There is not much novelty, it is purely a personal summary, I hope it can be of some help to beginners.

1. CSS HACK

The following two methods are almost the same Can solve all today's HACK.

1, !important

With IE7's support for !important, the !important method is now only for IE6's HACK. (Pay attention to the writing. Remember that the declaration position needs to be In advance.)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

Copy after login

2, IE6/IE77 for FireFox

*+html and *html are IE specific tag, firefox does not support it yet. And *+html is a unique tag for IE7.

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

Copy after login

Note:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

Copy after login

2. Universal float closure (very important!)

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]

Add the following code to Global CSS and add class="clearfix" to the p that needs to be closed. It works repeatedly.

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

Copy after login

3. Other compatibility tips (again)

1. Setting padding on p under FF will cause the width and height to increase, but IE will not. (Available! important solution)

2, centering problem.

1). Vertically centered. Set line-height to the same height as the current p, and then pass vertical-align: middle.(Be careful not to wrap the content.)

2). Horizontally centered. margin: 0 auto;(Of course it’s not a panacea)

3. If you need to add styles to the content in the a tag, You need to set display: block; (common in navigation tags)

4. The difference in understanding of BOX between FF and IE leads to a 2px difference and problems such as the margin of p set to float doubling under IE.

5, The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)

6, As an external wrapper, p should not have a fixed height. It is best to add overflow: hidden. to achieve height adaptation.

7, About the hand cursor. cursor: pointer. And hand is only applicable to IE.

P.S As for IE5 and other browsers, there is no need to take care of it. It is not worth spending time on this.

The above is the detailed content of Detailed introduction to web pages developed with JavaScript that are compatible with various browsers. For more information, please follow other related articles on the PHP Chinese website!