确定正在使用的浏览器,然后为依赖于该浏览器的类设置样式
Determine what browser is being used, then style a class dependant on that
是否有一种方法可以检查网站在哪个浏览器中被查看,然后在此基础上更改CSS类中的某些元素,使其在所有浏览器上看起来都一样?
在CSS中有办法做到这一点吗?
编辑:好的,我已经得到了它的工作在IE和火狐现在,但它看起来有点偏离chrome....是否有一些Javascript来检测我是否使用chrome,然后基于此更改类#titleAreaBox的margin-bottom ?
您可以使用Modernizr:
逐步增强CSSModernizr是一个检测HTML5和CSS3特性的JavaScript库在用户的浏览器中
如何使用条件CSS?
它运行在服务器端,允许你在CSS代码中添加条件下面是项目网站上的一个例子:
body {
font: 90%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
body, html {
height: 100%;
width: 100%;
}
.container {
text-align: center;
font-size: 3em;
}
[if IE].container {
height: 100%;
width: 100%;
text-align: center;
line-height: 2em;
[if gte IE 7]background: url('ie7.png') no-repeat center center;
[if lte IE 6]background: url('ie.jpg') no-repeat center center;
}
[if Webkit].container {
position: absolute;
top: 50%;
left: 50%;
height: 70px;
width: 400px;
margin-top: -125px;
margin-left: -200px;
padding-top: 180px;
-webkit-border-radius: 30px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: url('webkit.png') no-repeat center 30px;
background-color: #eee;
-webkit-text-stroke: 1px #555;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
[if Opera].container {
position: absolute;
top: 50%;
height: 60px;
width: 100%;
margin-top: -100px;
padding-top: 140px;
background: url('opera.png') no-repeat center 10px;
background-color: #ccc;
}
[if Gecko].container {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 300px;
margin-left: -150px;
font-size: 32px;
line-height: 2em;
background: url('moz.png') no-repeat center center;
background-color: #ddddff;
}
您可以在Internet Explorer中使用条件注释来完成此操作,例如:
<!--[if IE 6]>
// IE6
<![endif]-->
<!--[if lte IE 8]>
// IE8 or below
<![endif]-->
对于其他浏览器,您必须使用JavaScript。(提示:尝试使用navigator.userAgent
,在我的计算机上是"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"
。)
需要这个
你可以通过PHP使用$_SESSION['HTTP_USER_AGENT']
也可以通过HTML瞄准IE浏览器:试一试:
<!--[if IE 6]><link rel="stylesheet" href="path_to_style_ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="path_to_style_ie7.css" type="text/css" media="screen, projection"><![endif]-->
或CSS文件内的溢出问题:如果浏览器是IE
对于Internet explorer,您可以在header html标签中添加以下内容:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
<!--[if IE 7]>
...include IE7-specific stylesheet here...
<![endif]-->
<!--[if lte IE 8]>
// IE8 or below
<![endif]-->
对于mozilla,您可以将此添加到样式表中,以指定仅适用于mozilla浏览器的css代码
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: red;
}
}
/***** Selecor Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue'9; }
/* IE7, IE8 */
#veinte { color/*'**/: blue'9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
</style>
正如其他人提到的,Modernizr是理想的选择。不再建议检查浏览器版本。相反,您应该测试所需的功能。你可以使用像Modernizer这样的库来帮助你。
例如:要检查地理定位功能,您可以使用此检查:
if (Modernizr.geolocation) {
//your code
}
如果您正在检查浏览器版本,那么您可能希望从中获得某些功能,例如地理定位或AJAX(由于某些原因,IE在其生命周期中使用不同的库来完成此功能)。
在jQuery中这样做:
$(document).ready(function(){
if(navigator.userAgent.indexOf("Mozilla") > 0 )
$(".titleAreaBox").css("margin-top", changed_value);
if (navigator.userAgent.indexOf("MSIE") > 0 )
$(".titleAreaBox").css("margin-top", changed_value);
if (navigator.userAgent.indexOf("Chrome") > 0)
$(".titleAreaBox").css("margin-top", changed_value);
if(navigator.userAgent.indexOf("Opera") > 0 )
$(".titleAreaBox").css("margin-top", changed_value);
});
- 依赖于缓慢加载javascript的UI
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- Node.js中依赖于版本的类型继承
- 如何使AngularJS控制器依赖于通过ajax加载在rootScope上的值
- 如何使用EnquireJS使AngularJS范围变量依赖于媒体查询
- Ajax xml源解析依赖于jQuery的点击操作
- Sails.js日志传输依赖于环境
- 如何使用 2 个 XMLHttpRequest 一个依赖于另一个
- 如果用户的浏览器早于以下版本,则显示一条消息:IE 10、Firefox 39、Chrome 39、Opera 8
- Javascript表单.使一个条目依赖于另一个条目
- 在<p>标签依赖于<选择>标签,javascript
- 从 JavaScript 更改依赖于浏览器的 CSS 样式
- 是Javascript's依赖于用户的Date对象'的浏览器
- 确定正在使用的浏览器,然后为依赖于该浏览器的类设置样式
- 更改依赖于浏览器的类中的元素
- 不依赖于URL的浏览器插件的本地存储
- 在制作多人游戏时,我是否依赖于浏览器不提供变量给玩家?
- 为什么使用依赖于浏览器的CSS ?
- 在浏览器中保持输入值不变,不依赖于浏览器
- 是否有检测javascript库是否依赖于浏览器的服务