<hr> 1px의 수평선이 완벽하지 않습니다.

<hr> HTML 태그를 사용하여 만든 간단한 테두리 스타일을 테스트하려고합니다. 수직선과 수평선으로 구성됩니다. 수직선은 완벽하게 표시되지만, 수평선에는 끝 부분에 작은 이상한 곡선이 있습니다. 왜 그런 일이 발생하는지 잘 모르겠습니다. 누군가가 문제를 알고 있습니까? 여기 <hr> 1px의 수평선이 완벽하지 않습니다.

<div style="width:680px; height:540px; position: relative;"> 


<hr style="height: 23%; width: 0.01em; position: absolute; left: 35.3%; top: 5.5%;"> 
    <hr style="height: 18%; width: 0.01em; position: absolute; left: 35.3%; top: 40.5%;"> 
    <hr style="height: 20%; width: 0.01em; position: absolute; left: 35.3%; top: 70.5%;"> 




    <hr style="height: 23%; width: 0.01em; position: absolute; left: 65.9%; top: 5.5%;"> 
    <hr style="height: 18%; width: 0.01em; position: absolute; left: 65.9%; top: 40.5%;"> 
    <hr style="height: 20%; width: 0.01em; position: absolute; left: 65.9%; top: 70.5%;"> 




    <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 34.5%;"> 
    <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 34.5%;"> 
    <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 34.5%;"> 



    <hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 64.5%;"> 
    <hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 64.5%;"> 
    <hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 64.5%;"> 

</div>

가 jsfiddle 링크입니다 :

http://jsfiddle.net/Qc22p/

출처

2013-05-15 Conor

먼저 디버그를 용이하게하기 위해 공통 속성에 대한 클래스를 사용하는 것이 좋습니다. 그리고 내가 본 곳에서 수직선은 수평선과 같은 sme 문제가 있습니다 ... –

FireFox (최신 버전)에 어떤 문제도 보이지 않습니다. 또한 HR 태그는 자동으로 닫아야합니다. '

'은 XHTML과 호환됩니다. – Dave

@DaveRook 강박하지 않습니다. –

그래서 그들이

여기 내 코드입니다. 나는 그것이 CSS의 "테두리 스타일"또는 3D 효과 ... 그루브, ridged 또는 somesuch로 렌더링하기위한 것일 수 있습니다 용의자.

참조 : http://www.w3schools.com/cssref/pr_border-style.asp

그래, 추가 border-style:solid; 그것을 고정.

더 예쁜 테두리 스타일을 찾을 수 있습니다.

출처

2013-05-15 11:40:13

그는 자신의 평판이 좋지 않아 upvote 할 수 없습니다. P – Sachin

@ThomasW : 투표하지 마십시오. – MMM

태그가 항상 경계선을 찾는 것처럼 보였기 때문에 이상한 점이 있습니다. 1px의 한 줄로는 결코 좋아하지 않습니다. 내가 1px의 테두리와 견고한 경계 스타일을 주었을 때 경계 (평행선) 때문에 2px 라인으로 나타났습니다. 아마 이렇게하기 위해 다른 태그를 사용해 봐야할까요? 나는 이미지를 사용하는 것이 또 다른 선택이지만 그것을하고 싶지는 않다는 것을 알고있다. – Conor

3D 스타일에 대해 말하고 있습니까? 그것은 hr 요소에 대한 브라우저의 기본 스타일입니다, 당신을 적용하려면 border: 0;를 사용하여 기본 스타일을 재설정하거나 border: 1px solid #000를 사용하여 변경할 수 있으며 색상을 설정할 수 있습니다 따라

Demo

출처

2013-05-15 11:41:19

왜 처음에 경계를 재설정 한 다음 어쨌든 설정합니까? 첫 번째 진술을 그대로 둡니다. – MMM

@MMM 기본 시간과 변경된 시간대의 차이점을 보시겠습니까? –

당신이 무엇을 요구하고 있는지 이해할 수 없다. 어쨌든 (당신의 jsfiddle에서) 다음 줄에서 그것을 덮어 쓰기 때문에'border : none' 문이 필요 없다는 것입니다. – MMM

당신이보고있는 때문이다 그 border. 3D 테두리를 제거하고 가로선에 border-top, 세로선에 border-left (예 : 1px solid black)을 설정합니다.

출처

2013-05-15 11:41:21 MMM

팁 주셔서 감사합니다. – Conor

<hr> 1px의 수평선이 완벽하지 않습니다.

답변

관련 문제