search

Home >Web Front-end >JS Tutorial >Detailed examples of javascript developed web pages compatible with various browsers

Detailed examples of javascript developed web pages compatible with various browsers

小云云
小云云Original
2017-12-27 10:02:021024browse

It is a commonplace issue that CSS is compatible with various browsers. There are tutorials everywhere on the Internet. This article mainly introduces the relevant information on web pages developed by JavaScript that are compatible with various browsers. Here are several methods (pure Personal summary) to help everyone master such a function. Friends who need it can refer to it. I hope it can help everyone.

1. CSS HACK

The following two methods can solve almost all HACKs today.

1, !important

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

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

2 , IE6/IE77 for FireFox

*+html and *html are IE-specific tags, which are not supported by firefox yet. And *+html is a IE7-specific tag.

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

Note:

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

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 every time. .

<style>


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

.clearfix {display:block;}


</style>

3. Other compatibility tips (again)

1, setting padding on p under FF will result in width and height increase, but IE will not. (can be solved with !important)

2, centering problem.

1). Vertically centered. Set line-height to The same height as the current p, and then vertical-align: middle. (Be careful not to wrap the content.)
2). Horizontally centered. margin: 0 auto;(Of course it is not omnipotent)

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 in settings. Issues such as doubling the margin for float p 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 For navigation labels and content lists)

6, as the external wrapper p, do not set a fixed height. It is best to add overflow: hidden. to achieve height adaptation.

7, Regarding 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 into account it. It is not worth spending time on this.

If you have any questions, please leave a message or go to the community of this site to communicate and discuss. Thank you for reading. I hope it can help everyone. Thank you for your support of this site!

Related recommendations:

Implement js code for music playback that is compatible with various browsers

Based on jquery and is compatible with various browsers iframe adaptive height script_jquery

JS web page playback sound implementation code is compatible with various browsers_javascript skills

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of jQuery sub-element filter selectorNext article：Detailed explanation of jQuery sub-element filter selector

Related articles

See more