Statement to determine browser version and compatible with multiple browsers

Visible in IE6 and below


Visible in IE7 and below


Only IE6 version is visible

<![if !IE]>
<![endif]>
Versions other than IE


Visible in IE8 and below


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: 

<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

How to extract string elements from non-fixed positions in MySQL

Statement to determine browser version and compatible with multiple browsers

How to extract string elements from non-fixed positions in MySQL

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

Zabbix configuration DingTalk alarm function implementation code

Small details of web front-end development

Docker exec executes multiple commands

Solution to MySql service disappearance for unknown reasons

How to use JS to check if an element is within the viewport

Tutorial on building file sharing service Samba under CentOS6.5

How to get the width and height of the image in WeChat applet

Solution to the problem that docker nginx cannot be accessed after running

Recommend

Steps to use VMWare to build a Linux environment under Windows (picture and text)

Web page creation question: Image file path

JS cross-domain solution react configuration reverse proxy

Detailed explanation of Javascript Echarts air quality map effect

Page Refactoring Skills - Javascript, CSS

Analysis of the implementation of MySQL statement locking

MySQL Series 3 Basics

Comparison of the usage of EXISTS and IN in MySQL

Bootstrap 3.0 learning notes button style

HTML+CSS3 code to realize the animation effect of the solar system planets

How to center the entire page content so that the height can adapt to the content and automatically expand

Detailed explanation of asynchronous generators and asynchronous iterations in Node.js

CSS makes the footer automatically stick to the bottom when the content height is not enough

Introduction to fork in multithreading under Linux

A brief analysis of MySQL's lru linked list