최근 페이지에서 접하게 되었습니다. 원래는 디자인 도면의 점선 효과를 시뮬레이션하기 위해 테두리를 사용하고 싶었지만, 테두리 효과가 디자인 도면만큼 보기에 좋지 않다는 것은 분명합니다. 그런데 점선과 점선의 차이점을 공부해봤습니다.
우선 문자 그대로 이해하면 점선 과 점선은 모두 "점선"을 나타냅니다.
dashed : 대시에서, 대시로 구성된 점선
점선(dotted) : 점(dot)으로부터, 점들로 이루어진 점선, 점선이라고도 함
여기에 몇 가지 말도 안 되는 말을 더 하자면, 실제로 데모를 보면 좀 더 직관적인 시각적 경험을 얻을 수 있습니다.
이제 관련 버그에 대해 이야기하겠습니다. 물론 이러한 버그는 IE에서만 영광스럽게 나타납니다. 여기서는 IE6 및 IE7과 관련됩니다.
버그1: IE6에서 1px 너비의 점선은 점선과 동일하게 동작합니다. 너비가 1px보다 크면 정상적으로 작동합니다.
Bug2: IE7에서 네 변의 너비가 1px이고 다른 값이 공존하는 경우 1px 점선은 점선과 동일하게 동작합니다. 네 변의 너비가 모두 1px이거나 1px 이외의 다른 값인 경우에는 이 버그가 발생하지 않습니다.
Bug3: 또한 IE6에서는 페이지를 드래그할 때 1px 점선 또는 1px 점선 테두리가 실선으로 연결되거나 틈이 생기는 경우가 있습니다.
이러한 버그를 해결하려면 점선을 사용하지 않고 직접 대시를 사용하거나 대신 그림을 사용하거나 추가 태그와 코드를 사용하여 해결하세요.
이러한 버그는 테두리 너비가 1px일 때만 발생하므로 외부 주변 태그의 테두리 너비를 2px로 설정하고 내부 태그를 추가한 후 1px 콘텐츠 배경색 테두리로 설정한 다음 margin-top/right/를 설정하면 됩니다. 하단/왼쪽: -1px; 일반적인 시각 효과를 얻기 위해 외부 라벨을 둘러싼 1px 테두리를 덮습니다. 매우 장황하고 성가시며 무기력합니다.
.b6 {
테두리: 2px 점선 #000;
패딩 상단: 0;
}
.b6 .inner {
테두리: 1px 솔리드 #9c9c9c;
너비: 100%;
높이: 100%;
여백: -1px;
위치: 상대;
Z-색인: 100;
}
자세한 내용은 데모 를 참조하세요 .
원문: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html