CSS 브라우저 호환성 문제 - <hr />

내 HTML에는 각 표 셀에 대해 구분 된 이미지로 구성된이 표가 있습니다. 나는 div의 하단에 < hr /> 휴식 시간을 가지며 나머지 내용과 테이블을 구분합니다. Chrome에서 테스트 할 때 올바르게 표시되지만 Firefox에서 줄 바꿈이 제대로 정렬되지 않았으므로 몇 픽셀 올랐습니다.CSS 브라우저 호환성 문제 - <hr />

두 번째 문제는 이미지 때문입니다. 두 번째 테이블 셀과 세 번째 테이블 셀 사이에는 이미지를 분리하는 약 2px의 공백 간격이 있습니다.

브라우저 호환성 문제인지 정확하게 모르겠습니다 만 어떻게 수정합니까?

http://jsfiddle.net/Fe7DC/ - JSfiddle 코드

<div class="fade" id="Latest-Stories"> 
       <h3 class="section-header"> Son Xəbərlər </h3> 
        <table id="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td id="tablecell1"><a id="link_1"> <img id="img1" src="NewsBarAZ/Article-Nav-Bar2_01.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell2"><a id="link_2" ><img id="img2" src="NewsBarAZ/Article-Nav-Bar1_02.gif" alt="" /> </a></td> 
          </tr> 
          <tr> 
            <td id="tablecell3"><a id="link_3" ><img id="img3" src="NewsBarAZ/Article-Nav-Bar1_03.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell4"><a id="link_4" ><img id="img4" src="NewsBarAZ/Article-Nav-Bar1_04.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell5"><a id="link_5" ><img id="img5" src="NewsBarAZ/Article-Nav-Bar1_05.gif" alt="" /></a></td> 
          </tr> 
        </table> 
    </div> 
    <hr /> 
#Latest-Stories { 
    width:1000px; 
    height:598px; 
    padding-bottom:36px; 
    background-color:#FFF; 
    padding-left:20px; 
} 
#stories-preview { 
    float:right; 
    border-left:2px groove; 
    border-right:2px groove; 
    border-top:2px groove; 
    border-bottom:1px solid #9A9A9A; 
}

출처

2012-08-07 Elmir Kouliev

내가 아닌 테이블 형식의 데이터에 대한 테이블을 사용의 큰 팬이 아니라고 말해야와 함께, 목록은 아마 여기에 더 적합 할 것입니다. 그러나 그것은 질문 외에도 있습니다.

hr 구현은 브라우저 의존도가 매우 높기 때문에 IE를 사용하기 전까지는 거의 사용하지 않습니다. 내 충고는 .hr 클래스로 div로 대체하고 css에서 원하는대로 스타일을 지정하는 것이 좋습니다.

예 : 기본 테두리에 들지 않으면

<div class='.hr'></div> 

.hr { 
    padding-top: 5px; 
    border-bottom: 1px solid #000; 
    margin-bottom: 5px; 
}

, 당신도 작은 이미지를 사용하고 X 축을 따라 그것을 반복 할 수있다. 이 경우에는 div를 약간 높이는 것을 잊지 마십시오.

이미지 사이의 갭에 관해서는, 이것에 대한 설명이 없습니다. 아마도 실제 이미지와 관련이있을 것입니다. 상단 또는 하단에 투명 픽셀이있을 수 있습니다. 실제 이미지없이 말하기는 어렵다.

출처

2012-08-07 22:10:45 Pevara

이것은 시각적으로 좋지만 'hr'은 의미 적 의미를 지니고 있습니다. 브라우저가 의미 론적 의미에 중점을 둘지 여부는 여전히 논쟁의 여지가 있습니다. –

(자주 자주 DIV를 자주 사용하지는 않습니다.) –

당신은 여전히 hr을 추가하고 css로 숨길 수 있지만 그게 많은 의미가 있는지 의심 스럽습니다. 크로스 브라우저 스타일의 통증 때문에 정직하게 사용하지 않습니다. – Pevara

은 일반적으로 내 시간 요소에 CSS 스타일을 추가 : 셀과 행 사이의 잘못된 간격

line-height: 0.01; 
height: 1pt; 
border: 1pt solid black; 
border-width: 0 0 1pt 0; 
background: transparent;

그리고 피하기 위해 문제를, 나는 보통 내 소스 코드에 태그 사이의 모든 공백을 생략합니다. 예, 어려운 읽기를 만듭니다. 그러나 일부 브라우저는 작동을 거부합니다.

출처

2012-08-14 21:49:01 OmegaJunior

CSS 브라우저 호환성 문제 - <hr />

답변

관련 문제