Я столкнулся с этим на недавней странице. Изначально я хотел использовать границы для имитации эффекта пунктирной линии на чертеже, но очевидно, что эффект границы не так красив, как на чертеже. Кстати, я изучил разницу между пунктиром и пунктиром.
Прежде всего, если понимать это буквально, пунктирная и пунктирная линии относятся к «пунктирным линиям». Разница между ними заключается в следующем:
пунктир: от тире, пунктирная линия, состоящая из тире
пунктир: от точки (точки), пунктирной линии, состоящей из точек, также называемой пунктиром
Еще несколько слов ерунды. На самом деле, вы можете получить более интуитивный визуальный опыт, посмотрев демо .
Теперь давайте поговорим о связанных с этим ошибках. Конечно, эти ошибки снова великолепно проявляются только в IE, здесь речь идет об IE6 и IE7.
Ошибка 1. В IE6 пунктир шириной 1 пиксель ведет себя так же, как пунктир. Когда ширина превышает 1 пиксель, он ведет себя нормально.
Ошибка 2. В IE7, когда ширина четырех сторон равна 1 пиксель и сосуществует любое другое значение, пунктирная линия шириной 1 пиксель ведет себя так же, как пунктирная. Эта ошибка не возникнет, если ширина всех четырех сторон равна 1 пикселю или другим значениям, отличным от 1 пикселя.
Ошибка 3: Кроме того, в IE6 при перетаскивании страницы иногда пунктирная или пунктирная граница толщиной 1 пиксель соединяется в сплошную линию, а иногда возникают пробелы.
Чтобы устранить эти ошибки, либо не используйте пунктир, а используйте пунктир, либо используйте вместо него изображения, либо используйте дополнительные теги и коды для их устранения;
Поскольку эти ошибки возникают только тогда, когда ширина границы составляет 1 пиксель, вы можете установить ширину границы внешнего окружающего тега на 2 пикселя, добавить внутренний тег, установить для него рамку цвета фона контента шириной 1 пиксель, а затем установить маржу-top/right/ внизу/слева: -1px; чтобы скрыть границу толщиной 1 пиксель вокруг внешней метки для достижения нормальных визуальных эффектов. Очень многословный, надоедливый и беспомощный.
.b6 {
граница: 2 пикселя, пунктир #000;
отступ-верх: 0;
}
.b6 .inner {
граница: сплошная 1 пиксель #9c9c9c;
ширина: 100%;
высота: 100%;
поле: -1 пиксель;
положение: относительное;
z-индекс: 100;
}
Пожалуйста, обратитесь к демо-версии для получения подробной информации.
Исходный текст: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html.