Question

我对正在处理的项目有一个块引用，如果使用Chrome查看该页面，我希望更改text-align。 Chrome似乎无法识别text-align-last，所以Id只是将所有对齐方式更改为text-align：center;如果用Chrome查看。

如果用其他浏览器查看，我希望规则是text-align：justify; text-align-last：center;。

有办法做到这一点吗？

Answer 1

Browser sniffing不好，您应该使用feature detection代替。

在这种情况下，您可以使用@supports：

#target {
  text-align: center;
}
@supports (-moz-text-align-last: center) or (text-align-last: center) {
  #target {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center
  }
}

#target {
  text-align: center;
}
@supports (-moz-text-align-last: center) or (text-align-last: center) {
  #target {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center
  }
}

<div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div>

Answer 2

是的，您可以使用JavaScript更改css样式（JQuery使其更容易）。 JavaScript还可以检测正在使用的浏览器，因此您可以使用if语句根据浏览器更改css代码：

if($.browser.chrome) {}

使用JQuery更改css代码的示例：

$("p").css("align", "right");

Answer 3

如果您只想使用CSS来检测Chrome，则可以使用以下内容：

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

可以在此处找到更多针对浏览器的黑客攻击：

https://css-tricks.com/snippets/css/browser-specific-hacks/

出于历史目的：

/***** Selector 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  }

我可以根据浏览器更改CSS规则吗？

3 个答案: