인터넷 탐색기의 시간 스타일링

Question

안녕하세요, 가능한 한 사이트를 이미지 조명으로 만드는 내 탐구에서 두 가지 톤의 시간을 만들려고합니다.

나는 현대적인 브라우저에서 이것을 달성,하지만과 같은 6으로 효과 7.

내가 해봤

hr { 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    border-left:0px; 
    border-right:0px; 
} 

내가 사용하고 현재의 코드가를 달성하고자했습니다 성공을 통해 ie6 및 7에서 브라우저를 대상으로하지 않아도됩니다. 이견있는 사람?

(Heres는이 코드를 사용하고, 크로스 브라우저로 찾고 있어요 내 현재 프로젝트 - http://www.qwibbledesigns.co.uk/preview/aurelius/)를 대신 다음과 같은 것을 시도 (그리고 교체

건배

Answer 1

을

매트 <div>)

div { 
    /* no need for border-left/right with the following: */ 
    border: none; 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%; 
} 

와 <hr> (그리고 ID 또는 클래스를 추가하는 것을 잊지 마세요 모든 div가 이상하게 보이지 않도록하기 위해)

참고 : IE7, IE8 및 호환 브라우저에서 작동합니다. 아마도 10 살짜리 IE6에 대해 더 많은 조정이 필요하거나 이미지 해킹이 필요할 수도 있습니다 (너무 자주).

Answer 2

가장 쉬운 방법은 <div class="hr"></div>을 대신 사용하는 것입니다. 내 경험상 크로스 브라우저 <hr/> 스타일링은 머리를 부러 뜨립니다.

Answer 3

나는이 문제에 대해 좋은 답변을 보지 못했지만 다음과 같은 코드가 HR이 firefox, safari, chrome 및 IE (IE7 이하에서 작동하는지 확실하지 않음)로 일관되게 보이도록 작동해야한다고 생각했습니다. 당신이 클라이언트가 이미 < 시간에 사이트를 반죽 한 경우

hr { 
    color:#bfbfbf; /*used for IE, top color*/ 
    background:#bfbfbf; /*firefox and chrome, top color*/ 
    min-height: 0px; /*required to get IE to render the top pixel color*/ 
    border-left: 0px; 
    border-right: 0px; 
    border-top: 1px solid #bfbfbf; /*Your top color*/ 
    border-bottom: 1px solid #ffffff; /*Your bottom color*/ 
} 

Answer 4

> 태그 방금 스타일의 시간뿐만 아니라 시간 클래스는 다음 < 시간을 바꿀 수는> IE6와 IE7에서 밖으로 태그.

아벨에 의해 게시 된 CSS를 사용하여 바로 넣어 당신의 js 파일에 다음

hr, .hr { 
    /* no need for border-left/right with the following: */ 
    border: none; 
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%; 
} 

:

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) { 
    $("hr").replaceWith('<div class="hr"></div>'); 
} 

이 분명 jQuery를이 수정이 필요하지만, 나를 위해 잘 작동합니다.

Answer 5

높이를 2px로 설정하면 문제가 해결됩니다. 주제 끄기

hr { 
    margin: 1em 0 1em 0; 
    border: none; 
    border-top: 1px solid #000; 
    height: 2px; 
    display: block; 
} 

Answer 6

hr 
{ 
    /* hr css reset */ 
    color: white; /* if parent element's background is white - old ie versions fix */ 
    border: 0; 
    background: transparent; 
    height: 0; 
    margin: 0; 
    /* hr css reset end */ 
    /* custom styles */ 
    margin: 20px 0; 
    border-top: 1px solid red; 
}