2014-12-14 2 views
1

나는 순수한 CSS 번역을위한 솔루션을 stackoverflow에서 찾았습니다. CSS에서 Here.순수 CSS 웹 사이트 번역

내가 가진 :

function setLang(lang) { 
    document.getElementsByTagName('html')[0].setAttribute('lang',lang);     
} 
:

<html lang="sl"> 

및 LANG의 변화를

<div class="sl">Pozdravljeni</div> 
<div class="en">Hello</div> 

내가 JS를 사용하여 속성 : HTML에서

.en, .sl { display:none; } /* hide all elements with a language class */ 
.en:lang(en), .sl:lang(sl) { display:block; } /* show those elements that match their language class */ 

Chrome의 내 컴퓨터에서 정상적으로 작동합니다. 그것은 내 아이폰에서 작동합니다. ipad 미니에. 하지만 Chrome의 내 여자 친구 컴퓨터에서는 작동하지 않습니다. 그리고 IE에는 없습니다.

그리고 IE에서는 내 컴퓨터에서 작동하지 않는 것 같습니다.

문제가 CSS에 있습니다. 이 코드 :

.en, .sl { display:none; } 

작품이되지는 :

.en:lang(en), .sl:lang(sl) { display:block; } 

내가 잘못이 무엇인지를 알아낼 수 없습니다.

+0

': lang' 가상 클래스는 버전 8까지 IE에서 작동하지 않으며''이 필요할 수 있습니다. 버전 1부터 Chrome에서 지원되었으므로 컴퓨터에서 작동하는 경우 해당 버전이 작동해야합니다. 'html'대신 'body'에 언어 설정을 시도해 볼 수 있습니다. –

+0

지원하는 모든 언어로 모든 컨텐츠를 추가 하시겠습니까? – GolezTrol

+0

그게 이상한거야. 두 가지 크롬에서 모두 동일하게 작동하지 않습니다. – Kiki

답변

1

.de:lang(sl)에서 <div> 클래스를 타겟팅하고 있지만 <div> 클래스가 "de"가 아니어야합니다.

따라서 .de:lang(sl).sl:lang(sl)으로 변경하면 정상적으로 작동합니다.

+0

그건 오타입니다. 사실 나는 가지고있다 :. sl : lang (sl). – Kiki

0

".en"및 ".de"는 클래스 이름을 나타내며 ": lang (en)"및 ": lang (sl)"은 lang 속성을 참조합니다.

.en:lang(en), .de:lang(sl) { display:block; } 

+0

lang pseudo-class *는 (*) 아이들이 상속받을 수 있어야합니다. –

+0

이 사이트에 게시하면 오타되었습니다. 실제로 나는 가지고있다 : .sl : lang (sl) ... – Kiki

+0

오케이, 음, 오타가 수정되었으므로 제대로 작동하는 것처럼 보이고 상속받지 않는 lang에 대한 내 의견은 틀렸다. 파서가 다른 lang을 가진 무언가를 치기 전까지 상속된다. –

0
html[lang="en"] .de, 
html[lang="en"] .sl { 
    display: none; 
} 

html[lang="de"] .en, 
html[lang="de"] .sl { 
    display: none; 
} 

html[lang="sl"] .de, 
html[lang="sl"] .en { 
    display: none; 
} 
0

그것을 "블록"EN "클래스 모든 항목 디스플레이하여 lang ="EN '및'드 '클래스 어떤 항목 및 랭 ='SL을 "사용"을 의미 setLang을 사용하는 데 오류가있었습니다. ''...

잘못을 누락 :

<body onload="setLang(<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>);"> 

권리 :

<body onload="setLang('<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>');"> 

가 TNX, 릭 히치콕이, 당신의 의견은 나에게 힌트를 제공합니다.

+0

이 질문에 전혀 언급되지 않은 내용입니다. 이것이 대답이라면, 질문은 실제로 요구 된 것이 아니 었습니다. –

+0

네, 맞습니다. 나는 어떻게 든 코드의이 부분에는 문제가 없다고 생각했지만 CSS 디스플레이 블록에는 문제가 없다고 확신했다. – Kiki