Проблемы с полями в Chrome / Firefox и отступами: как их выстроить? - PullRequest
2 голосов
/ 31 декабря 2011

Я пытаюсь выполнить очень простую настройку вкладок на своем сайте, но у меня возникают некоторые проблемы из-за разницы в размерах полей / отступов между Firefox и Chrome.Вот ссылка jsfiddle на то, о чем я говорю: http://jsfiddle.net/xqhf6/3/

Вот как это выглядит в chrome: chrome

Вот как это выглядит в Firefox: firefox

В основном, вот мои настройки:

  • .mydiv {...}: каждый блок - это mydiv с отступом 6px и границей 1px слева, справа& Топ.
  • .header {...}: содержит два элемента div с границами вверху и нижней границей
  • .subheader {...}: находится под заголовком (содержит другие элементысправа не имеет значения).

Я попытался установить цвет для подзаголовка, попытался увеличить его z-индекс, чтобы он был больше, чем у заголовка, и все же ничего не работает.Я просто хочу, чтобы маленькие висячие границы исчезли.

Помощь будет принята с благодарностью, благодаря переполнению стека!

ОБНОВЛЕНИЕ Вот ссылка на jsfiddle для того, что яговорить о: http://jsfiddle.net/xqhf6/3/ ОБНОВЛЕНИЕ 2 При попытке использовать некоторые из вариантов, мне кажется, лучше всего попытаться найти способ использовать подзаголовок, чтобы каким-то образом маскировать висячие границы.Невозможно сделать это (как я уже говорил, ничего не работает, когда я играю с прозрачностью и цветом z-index / subheader & color)

Ringo

1 Ответ

2 голосов
/ 31 декабря 2011

Вы получите странные эффекты, если попытаетесь применить границу к элементу inline.Измените элементы <span> на display: inline-block;.

Предварительный просмотр: http://jsfiddle.net/Wexcode/2A2s8/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...