Statement to determine browser version and compatible with multiple browsers
|
<!--[if lte IE 6]> <![endif]--> Visible in IE6 and below <!--[if lte IE 7]> <![endif]--> Visible in IE7 and below <!--[if IE 6]> <![endif]--> Only IE6 version is visible <![if !IE]> <![endif]> Versions other than IE <!--[if lt IE 8]> <![endif]--> Visible in IE8 and below <!--[if gte IE 7]> <![endif]--> Visible in IE7 and below usage: (1) You can use the following code to detect the current IE browser version (note: the effect will not be seen in non-IE browsers) <!––[if IE]> <h1>You are using Internet Explorer</h1> <!––[if IE 5]> <h2>Version 5</h2> <![endif]––> <!––[if IE 5.0]> <h2>Version 5.0</h2> <![endif]––> <!––[if IE 5.5]> <h2>Version 5.5</h2> <![endif]––> <!––[if IE 6]> <h2>Version 6</h2> <![endif]––> <!––[if IE 7]> <h2>Version 7</h2> <![endif]––> <![endif]––> What if the current browser is IE, but the version is lower than IE5? You can use <!–[if ls IE 5]>. Of course, conditional comments can only be used in the IE5+ environment, so <!–[if ls IE 5]> will not be executed at all. lte: is the abbreviation of Less than or equal to, which means less than or equal to. lt: It is the abbreviation of Less than, which means less than. gte: is the abbreviation of Greater than or equal to, which means greater than or equal to. gt: It is the abbreviation of Greater than, which means greater than. ! : It means not equal, which is the same as the not equal to judgement operator in JavaScript (2) How to apply conditional comments is explained at the beginning of this article. Because different versions of IE browsers interpret the WEB standard pages we make differently, specifically, they interpret CSS differently. In order to be compatible with these, we can use conditional comments to define them separately and ultimately achieve the purpose of compatibility. For example: <!-- By default, the css.css style sheet is called first--> <link rel="stylesheet" type="text/css" href="css.css" />< !-–[if IE 7]> <!–- If the IE browser version is 7, call the ie7.css style sheet- –> <link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]–-> <!–-[if lte IE 6]> <!–- If the IE browser version is less than or equal to 6, call the ie.css style sheet-–> <link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–> This distinguishes the execution of CSS between browsers lower than IE7 and IE6, achieving compatibility. At the same time, the default css.css in the first line can also be compatible with other non-IE browsers. Note: The default CSS style should be located in the first line of the HTML document, and all content for conditional comment judgment must be located after the default style. For example, the following code is displayed in red when executed in IE browser, but in black when executed in non-IE browsers. If the conditional comment judgment is placed in the first line, it cannot be implemented. This example can well illustrate how to solve the compatibility problem between IE browser and non-IE browser. <style type="text/css"> body{ background-color: #000; } < /style> < !-–[if IE]> <style type="text/css">body{background-color: #F00;}< /style>< ![endif]–-> At the same time, some people may try to use <!–-[if !IE]> to define the situation in non-IE browsers, but please note: conditional comments can only be executed in IE browsers. This code will not only not execute the definition under the condition in non-IE browsers, but will be ignored as a comment. Normal is the default style, and conditional comments are performed only when special processing is required for IE browsers. In HTML files, not in CSS files. These comments are now available in DWcs4: in "Window -> Code Snippet -> Comments". I haven't noticed the other versions. |
<<: Tutorial on installing Ceph distributed storage with yum under Centos7
>>: Nodejs-cluster module knowledge points summary and example usage
Recommend
Example code for implementing transparent gradient effects with CSS
The title images on Zhihu Discovery columns are g...
Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation
Table of contents Introduction to bootstrap and i...
Why the disk space is not released after deleting data in MySQL
Table of contents Problem Description Solution Pr...
Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit
1. Download MySQL Community Server 5.6.35 Downloa...
Detailed explanation of prototypes and prototype chains in JavaScript
Table of contents Prototype chain diagram Essenti...
How to use Vue to implement CSS transitions and animations
Table of contents 1. The difference between trans...
How to add, delete and modify columns in MySQL database
This article uses an example to describe how to a...
Teach you how to achieve vertical centering elegantly (recommended)
Preface There are many ways to center horizontall...
MYSQL database basics - Join operation principle
Join uses the Nested-Loop Join algorithm. There a...
Html+CSS floating advertisement strip implementation
1.html part Copy code The code is as follows: <...
What does the "a" in rgba mean? CSS RGBA Color Guide
RGBA is a CSS color that can set color value and ...
Detailed explanation of the four transaction isolation levels in MySQL
The test environment of this experiment: Windows ...
Common HTML tag writing errors
We better start paying attention, because HTML Po...
5 ways to quickly remove the blank space of Inline-Block in HTML
The inline-block property value becomes very usef...
Problems and solutions when installing and using VMware
The virtual machine is in use or cannot be connec...