Chrome CSS проблема: граница (справа) вокруг ссылки не отображается

Question

У меня есть маленький тестовый пример: http://jsfiddle.net/sV8js/

Вы можете видеть, что в Chrome (протестировано на win7 11.0.696.68) правая граница первых двух ссылок «обрезана» и не отображается. FF и IE 7/8/9, кажется, показывают это хорошо.

Просмотров: http://browsershots.org/http://top3skills.com/1.html

Также "глючит" в Safari (так что это связано с webkit?)

Кто-нибудь знает, в чем проблема с этим подходом или как его решить? (или если я должен сообщить об ошибке в Chrome) Есть ли обходной путь, который не влияет на другие браузеры?

Кроме того, мой тестовый пример отличается от Правая граница не отображается в Google Chrome , но, возможно, это та же ошибка?

Обновлено : я не хочу использовать встроенный блок, так как IE7 не поддерживает его, и я нахожу эту ошибку, потому что я удаляю встроенный блок, который у меня там был ранее :) Кроме того, это динамично, поэтому нелегко добавить
после каждой ссылки, потому что некоторые ссылки могут переходить на новую строку, другие нет ... поэтому я сначала пытаюсь найти «правильный путь», а затем прибегнуть к более "хитрые" способы.

Answer 1

Вы установили содержащий DIV на фиксированную ширину 250px . Это обрезает края. Кроме того, вы должны добавить display:inline-block; к вашему CSS классу ссылок. Это сделает вашу ссылку элементом block , оставив его inline . Также будет применен отступ, который вы правильно присвоили.

Смотрите обновленную ссылку здесь http://jsfiddle.net/sV8js/12/

Dan

Answer 2

Попробуйте дать этим ссылкам свойство display: inline-block или display: block, так как ссылки являются inline элементами.

Answer 3

вам нужно добавить display: block к .referencesSkills