Home >Web Front-end >HTML Tutorial >How to use css to make the background color of a div appear red in IE6, blue in IE7, and green in IE8? _html/css_WEB-ITnose

How to use css to make the background color of a div appear red in IE6, blue in IE7, and green in IE8? _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:01:191309browse

在一个页面中编写css代码,实现下面的功能:

让一个div的背景色在IE6中显示成红色,在IE7中显示成蓝色,IE8中显示成绿色?


如何实现?请告知!分不够,可以加分!




回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.box{background:green\0;+background:blue;_background:red;width:200px;height:200px;}</style></head><body><div class="box"></div></body></html>

dca32031f6a8e05ef10b0fc39355cc1a
1b771f47d72d900ba74308aee59557f0

刚才没说完。同理ie7就是if IE 7,IE8就是if IE 8。IE和版本号之间有空格。然后在代码段里引入css样式表。样式表里就加个background-color:对应的颜色就可以了

刚才没说完。同理ie7就是if IE 7,IE8就是if IE 8。IE和版本号之间有空格。然后在代码段里引入css样式表。样式表里就加个background-color:对应的颜色就可以了



如何判断是ie6,ie7,ie8呢?


刚才没说完。同理ie7就是if IE 7,IE8就是if IE 8。IE和版本号之间有空格。然后在代码段里引入css样式表。样式表里就加个background-color:对应的颜色就可以了



如何判断是ie6,ie7,ie8呢?
<html>	<head>		<title></title>		<meta http-equiv="Content-sytle" content="text/html;charset=utf-8" />		<!-- 如果是ie6,那么加入ie6的样式表 -->		<!--[ if IE 6]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!-- 同理ie7,ie8 -->		<!--[ if IE 7]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!--[ if IE 8]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!-- 另外if gt IE 8表示IE版本大于8.gte是小于等于.lt是小于 -->	</head>	<body>	</body></html>



刚才没说完。同理ie7就是if IE 7,IE8就是if IE 8。IE和版本号之间有空格。然后在代码段里引入css样式表。样式表里就加个background-color:对应的颜色就可以了



如何判断是ie6,ie7,ie8呢?
<html>	<head>		<title></title>		<meta http-equiv="Content-sytle" content="text/html;charset=utf-8" />		<!-- 如果是ie6,那么加入ie6的样式表 -->		<!--[ if IE 6]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!-- 同理ie7,ie8 -->		<!--[ if IE 7]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!--[ if IE 8]>			<link rel="stylesheet" type="text/css" href="ie6.css" />		<![endif]-->		<!-- 另外if gt IE 8表示IE版本大于8.gte是小于等于.lt是小于 -->	</head>	<body>	</body></html>


可以给出一个完整的例子吗?再加你分


demo.htm用来显示效果。

<!DOCTYPE html><html>	<head>		<title>demo</title>        <meta http-equiv="Content-sytle" content="text/html;charset=utf-8" />        <style type="text/css">        	div {         		color:white;        	}        </style>        <!--[if IE 6]>            <link rel="stylesheet" type="text/css" href="ie6.css" />        <![endif]-->        <!--[if IE 7]>            <link rel="stylesheet" type="text/css" href="ie7.css" />        <![endif]-->        <!--[if IE 8]>            <link rel="stylesheet" type="text/css" href="ie8.css" />        <![endif]-->	</head>	<body>		<div>			<p>this is a box.It will be red in ie6,blue in ie7,green in ie8.</p>		</div>	</body></html>

ie6.css:
div {	background-color: red;}

ie7.css
div {	background-color: blue;}

ie8.css
div {	background-color: green;}

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