作为一个 web 开发员, 特别是前台设计师在做 Web 开发的时候经常会遇到一些浏览器不兼容的情况, 这也是许多开发者头痛的问题, 因为这不是开发者技术的问题, 而是浏览器不统一而导致. 这里总结了一些通过 CSS 代码来判断浏览器的类型, 从而针对不同的浏览器写出不同的 CSS 代码来解决浏览器兼容的问题, 希望对大家有所帮助:
(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
一, 通过 CSS 代码直接判断 (就是在 CSS 代码里面进行判断)
- <style type="text/css">
- .top{color:red ;}/*Firefox*/
- * HTML #example{color:blue;}/*ie6*/
- *+ HTML #example{color:green;}/*ie7*/
- </style>
- </head>
- <body>
- <div class="top"> 在 Firefox 下显示为红色, 在 IE6.0 下显示为蓝色, 在 IE7.0 下显示为绿色.</div>
- </body>
二, 通过 CSS 条件注释的方法判断 (条件注释就是用 if 语句来判断浏览器的型号)
- <style>
- .top{color:#ff6600}/*-- 火狐显示为橙色 */
- </style>
- <!--[if IE 6]>
- <style>
- .top{color:#0000ff}/*--IE6 显示为蓝色 */
- </style>
- <![endif]-->
- <!--[if IE 7]>
- <style>
- .top{color:#ff0000}/*--IE7 显示为红色 */
- </style>
- <![endif]-->
- <!--[if IE 8]>
- <style>
- .top{color:#6633cc}/*--IE8 显示为紫色 */
- </style>
- <![endif]-->
- <body>
- <div class="top"> 在 Firefox 下显示为橙色, 在 IE6.0 下显示为蓝色, 在 IE7.0 下显示为红色, IE8 显示为紫色 </div>
- </body>
三, 针对 IE 浏览器, 条件注释语句还有一些减少逻辑判断的参数:
lte:Less than or equal to 的简写 (就是小于或等于的意思).
lt :Less than 的简写 (就是小于的意思).
gte:Greater than or equal to 的简写 (就是大于或等于的意思).
gt :Greater than 的简写 (也就是大于的意思).
例如:
- <!--[if gt IE 5.5]>
- / 如果 IE 版本大于 5.5 /
- <!-[if lte IE 6]>
- / 如果 IE 版本小于等于 6 /
- <!-[if !IE]> / 如果浏览器不是 IE /
来源: http://www.css88.com/qa/css3/14485.html