踢飞CSS Hack 解决跨浏览器兼容性问题

用户代理分析与CSS适配

最新推荐文章于 2025-06-04 16:35:52 发布

最新推荐文章于 2025-06-04 16:35:52 发布 · 113 阅读

文章标签：

#浏览器 #CSS #IE #Java #Rails

本文介绍了一种通过分析HTTP请求头中的User-Agent来识别客户端浏览器类型与版本的方法，并展示了如何根据不同浏览器版本加载相应的CSS文件。使用Java实现的User-Agent分析器能够准确识别IE浏览器的不同版本，并为其他浏览器提供默认样式。

客户端浏览器和服务器进行交互时，其版本信息其实已经在http-header里了，提取出其中的user-agent字段，返回不同的CSS文件，问题解决。

下面附上java的代码，其它语言与之类似

Rails request.env["HTTP_USER_AGENT"]

PHP $_SERVER["HTTP_USER_AGENT"];

ASP Request.ServerVariables("http_user_agent");


package com.util;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import javax.servlet.http.HttpServletRequest;

/**
 * 提取客户端浏览器的UserAgent
 * @author Snow
 * */
public class UserAgentAnalyzer {

	/**
	 * 返回客户端浏览器的IE版本，
	 * 火狐及其它浏览器返回 -1
	 * */
	public static int getUserAgent(HttpServletRequest request)
	{
	 	String userAgent = request.getHeader("user-agent");  
		String regExp = ".*MSIE (\\d).*";

		Pattern p = Pattern.compile(regExp);
		Matcher m = p.matcher(userAgent);
		String field = "";
		boolean b = m.matches();//用正则匹配IE浏览器版本号

		if(b)
		{
			int version = -1;
			try
			{
				field = m.group(1);
				version = Integer.parseInt(field);	
				return version;
			}
			catch(Exception e)
			{
				return version;
			}

		}
		else
		{
	 		return -1;
		}
	}
}

JSP页面上


<%@ page import="com.util.UserAgentAnalyzer" %>


<html>
<body>
public css links<br>
<% 
int version = UserAgentAnalyzer.getUserAgent(request);
switch(version)
{
	case 6:
	%>
	ie6 css links
	<% 
	break;
	case 7:
	%>
	ie7 css links
	<% 
	break;	
	case 8:
	%>
	ie8 css links
	<% 
	break;

	case -1:
	%>
	firefox css links
	<% 
	break;
}
%>
<br>
<%= "Version is "+ String.valueOf(version)%>

</body>
</html>