按钮文本在IE 10中无法垂直对齐

Question

我有一个带文本的按钮，但是在按钮内部，文本垂直对齐似乎不正确。这只在IE 10上发生。Chrome则完美。

HTML

<input type="text" id="postcode" name="Postcode" class="input" placeholder="enter your postcode..." maxlength="8" size="10"><button class="button" type="submit" id="postcode">FIND DEALS</button>

CSS

.banner-input button{
    background: #0072bc;
    font-family: "Myriad Pro", 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    width: 108px;
    height: 54px;
    margin: 0 0 0 10px;
    border: 1px solid #00548a;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #005f9c;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0072BC', endColorstr='#FF005F9C');
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7b814), color-stop(100%, #ff9100));
    background-image: -webkit-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: -moz-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: -o-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: linear-gradient(top, #0072bc 0%, #005f9c 100%);
    color: #fff;
    line-height: 40px;
    vertical-align: middle;
}

我尝试了各种行高和填充方式，但似乎都不起作用。:(

- Jonnerz

---

垂直对齐仅适用于单元格... 对我来说已经对齐了... 只是底部必须再多左填充3像素.... - Seazoux

请在此处查看：http://swiftping.co/development/msb/page.html - Jonnerz

Answer 1

尝试将行高设置为高度 --> line-height: 54px;

- Mary Tarasenko

---

当我在 Chrome 上执行此操作时，它似乎更低。我认为这是由于字体的高度在 Chrome 上略微小于 IE。不过还是谢谢。 - Jonnerz

我同意，可能是因为字体的原因。我不使用Myriad Pro，也不能确定它是否跨浏览器。我认为更好的方法是从搜索跨浏览器行高开始。首先尝试设置line-height: 1.2em; 如果文本在不同浏览器中处于相同水平，则文本不会垂直对齐-这就是您需要的。如果这不起作用，请尝试设置line-height = font-size * 1.2（18 px），然后再次检查水平线。重复此操作，每次将行高增加1（19、20...），直到找到跨浏览器的解决方案（如果存在）。然后设置填充以对齐文本。 - Mary Tarasenko

Answer 2

我解决了这个问题。原来是字体的问题。

在IE浏览器上，Myriad Pro字体与Chrome和Firefox上显示有很大不同。我将字体更改为Open Sans，现在所有三个浏览器上的文本都能对齐了。

- Jonnerz

---

这是一个明智的决定！ - Mary Tarasenko

Answer 3

在无法更改字体（特定于客户设计）的情况下，您可以使用detectizr来检测浏览器版本、操作系统甚至设备类型。之后，您可以直接针对该元素进行定位。以下是一个Sass示例，用于您的按钮。

.ie { .btn-something { padding-top: 15px; } }

- user5905021

Answer 4

你在哪里设置按钮的内边距？我在你的 CSS 中没有看到这个。

你的行高似乎太高了。如果你的高度是 50 像素，内边距为 10 像素（上下），那么你的行高应该是 30 等等。

- Steve

---

我在按钮上没有设置填充，我目前将行高设置为高度。目前，在IE上文本略高于中心，在Chrome上略低。http://www.swiftping.co.uk/development/msb/page.html - Jonnerz