조건부 주석 CSS 규칙을 사용하여 쉽게 타겟으로의 함께 인터넷 익스플로러 브라우저 별:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
게코 엔진 (Firefox) 이 무례한 행동 하는 경우가 있습니다. 어떤 약간만이라도 최선의 방법은 아닌 다른 브라우저 Firefox 를 단일 타겟으로의 전용 CSS 규칙을 가능 즉, 인터넷 익스플로러, 오페라 뿐만 아니라 WebKit 규칙요 firefox 국한됨 무시하시겠습니까 한다고 한다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
@-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
끝 - < 스니핏 >;!
어떻게 이 문제를 다루기 위해 세 가지 다른 브라우저: IE, 크롬, FF
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
'' @Supports 사용할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
@supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
끝 - < 스니핏 >;!
Here @supports) 에 '보다'
다음은 일부 공략하기 위한 전용 브라우저를 브라우저 Firefox 학스
_:-moz-tree-row(hover), .selector {}
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
이는 gonna work on, 모질라 파이어폭스 3.6 이상
@media screen and (-moz-images-in-menus:0) {}
추가 정보가 필요하면 www. merant. 브라우제르하크스
첫째, a 부인문을. 난 내가 don& # 39, t really 정보지지자 솔루션에 대한 χ02 같습니다. Css 는 IE (특히 IE6), 비록 유일한 있지만브라우저에 특정 I wish I write it wasn& # 39, t 케이스.
이제 솔루션입니다. 그래서 내가 어떻게 그런 있습니다 수 있지만, 우아한 don& # 39 는 잘 모르는 것 # 39 의 우아한 it& 타겟으로의 게코 플랫폼의.
하지만 이 때 JavaScript 활성화되었는지 apc® 경우에만 사용 및 mizilla 바인딩 (스블), 즉 Firefox 에서 많이 사용되는 내부 및 기타 모든 게코 기반 제품. 그러나 CSS 속성을 대한 비교, 이건 마치 비헤이비어를 IE 에서 훨씬 더 강력한.
3 개의 파일이 포함되어 있는 내 해결책:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
h1 {
color: red;
}
this.className += " firefox";
엔진 특정 규칙을 사용하여 있지만브라우저에 유효인 대상으로 합니다.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
사용자 에이전트 없이 '변형' 를 분석할 수 있는 것이 더 투명지에 서버측 첨부하려면 스타일시트가 페이지에 대한. 이렇게 리자크스 퍼라이크스 등 ',' 피세우스카스, 있을 수 있습니다.
내가 행한 모든 것을 포함하는 일반적인 데포t.크스 비슷한 구축하여 '' 다음 '스타일', 또는 특정 스타일 시트 가속화합니다 무시하려면 높이는 설정값으로.
이제 Firefox 는 실질적인 개선을 위한 - 57 - Quantum out with CSS, 또는 통칭 스티요 게코, 잠재적으로는 알려진 양자 교도관님도요 찾을 수 있는 상황에서 기존 버전의 파이어폭스, 파이어폭스, 양자 구별할 수 있습니다.
From my 오토메이티드 [here] (https://stackoverflow.com/questions/47575563/conditional-css-rule-targeting-firefox-quantum/47798653 # 47798653):
>. '와' 계산 '@supports 사용할 수 있습니다 (0 년대)' 과 함께 '-' @-moz-document 표현식에서는 테스트하려면 스티요 시간 값을 계산 () '가 아니라' 표현식에서는 스티요 게코 지원하지 않습니다.
>. <! - 언어: > css 랭 -;
>. @-moz-document uirl 접미어입니다. () { >. @supports (애니메이션: 계산기 (0 년대) { >. / 스티요 / >. } >. }
>. # 39 의 here& 개념 증명:
>. <! - begin 스니핏: js - >.
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}
끝 - < 스니핏 >;!
>. 기존 버전의 경우 까다로운 - # 39 는 약간 대상으로 Firefox 버전 ',' 를 지원하는 @supports you&, re 관심을 가질 뿐 아니라, '22 위로 @supports 원하는거요 Fx (애니메이션: 계산기 (0 년대)) '가 필요한 모든 것:
>. <! - 언어: > css 랭 -;
>. @-moz-document uirl 접미어입니다. () { >. @supports not (애니메이션: 계산기 (0 년대) { >. / 게코 / >. } >. }
>. . # 39, 심지어 신앙이니라 이전 버전을 지원하는 데 필요한 you& 할 수있을 [활용할 케스케이드] (https://stackoverflow.com/questions/16584228/what-is-the-most-practical-way-to-check-for-supports-support-using-only-css/16585200 # 16585200) 위에 있는 것처럼 개념 증명.
CSS 지원 는 javascript 에 바인딩하면 등 때는기대어 참고.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}
끝 - < 스니핏 >;!
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions