Наброски кнопок больше размеров кнопок

Я пытался сделать кнопку с 3 точками. Хотя с необычной проблемой. Когда вы нажмете на нее, вы заметите странную «гору», пока она находится в режиме фокусировки.Наброски кнопок больше размеров кнопок

button { 
 
    letter-spacing: 2px; 
 
    padding-top: .4em; 
 
    padding-bottom: .8em; 
 
    line-height: 0; 
 
    font-weight: 800; 
 
    background: black; 
 
    border: 0; 
 
    color: red; 
 
}

<button>...</button>

Jsfiddle

Как удалить его или что является причиной его?

источник

2016-10-29 Harugawa

«Гора» есть, потому что font-size больше по высоте, чем фактическая кнопка. Если вы удалите текст, вы заметите, что гора исчезла.

Чтобы исправить это, вы можете просто добавить overflow: hidden, чтобы текст не прокручивался через кнопку.

button { 
 
    letter-spacing: 2px; 
 
    padding-top: .4em; 
 
    padding-bottom: .8em; 
 
    line-height: 0; 
 
    font-weight: 800; 
 
    background: black; 
 
    border: 0; 
 
    color: red; 
 
    overflow: hidden; 
 
}

<button>...</button>

Вы также, кажется, имеют более padding, чем это необходимо, что, кажется, вызывает отрицательные внутренние размеры вашей кнопки и другие «глюки». Дважды проверьте их.

источник

2016-10-29 12:08:33 Chris

Спасибо, не подумал, что это может быть размер шрифта, и это как-то вытащило меня орехи, причина этого не казалась сложной проблемой для решения, но все же ... @_ @ – Harugawa

И прописная вещь, я сделал это таким образом, вызывая нормально без заполнения сверху и снизу с линией-высотой: 0 ;, он не равен с обеих сторон. https://jsfiddle.net/c1v634rb/1/ В этом примере точки внизу находятся – Harugawa

@Harugawa. Фактическая проблема заключается в том, что '...' представляет собой набор символов, выровненных в нижней части строки - не в середине (например, '-'). Чтобы устранить эту проблему, вы можете использовать псевдо-классы ': after' или': before', которые дают дополнительные параметры при выравнивании элемента. [Здесь] (https://jsfiddle.net/c1v634rb/2/) представляет собой демонстрацию с фиксированными размерами, включая хорошее дополнение. Ключевым моментом здесь является то, что текст '...' не ** больше, чем должен быть, поэтому ничего не «толкается», потому что я заставил его установить «высоту». – Chris

Вы можете использовать outline: none, хотя я не уверен, почему «гора» там в первую очередь. Это происходит только в Chrome, хотя Firefox кажется прекрасным.

источник

2016-10-29 11:54:40 Simone

Не удаляйте контур, это ключевая функция для доступности. – Roy

В дополнение к комментарию Роя вы * можете * удалить «контур», но если вы это сделаете, вы действительно должны заменить эту схему другим визуальным сигналом, чтобы показать, что элемент сфокусирован (используется ли «фон-цвет», «граница» -color', 'box-shadow' ...) действительно, для пользователя, не являющегося пользователем мыши, должно быть что-то, чтобы определить, какой элемент на странице сфокусирован. –

http://www.outlinenone.com/ – Simone

Наброски кнопок больше размеров кнопок

ответ

Смежные вопросы