发表新帖
发表新帖

Firefox/Safari setting height as [specified height - padding - border] for input[type=button]

前端 未结
关注
4 2166
南旧
南旧 2021-02-15 03:45

When I use the following CSS:

input[type=button] {
  background-color: white;
  border: 1px solid black;
  font-size: 15px;
  height: 20px;
  padding: 7px;
}
相关标签:
4条回答
  • 被撕碎了的回忆
    2021-02-15 04:32

    Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.

    To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.

    You can disable this behaviour with:

    select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

    (or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)

    The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.

    0 讨论(0)
  • 北荒
    2021-02-15 04:33

    A few things you can try:

    • Set the doctype of the document (<!DOCTYPE html>)
    • Set the input to be display:block or display: inline-block
    • Use a reset stylesheet.
    0 讨论(0)
  • 一向
    2021-02-15 04:35

    It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.

    0 讨论(0)
  • 误落风尘
    2021-02-15 04:38

    I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element. I Also set the line-height, font-size and the font-family.

    worked on FF,IE,safari and chrome :D

    0 讨论(0)
 看不清?
提交回复
热议问题