Question

在一个本地化Web应用程序的项目中，我们意识到由于浏览器对不同语言使用不同的字体（例如英语和日语，甚至两种不同的日语文本，具体取决于使用的字形），一些html对象的高度更改，最明显的输入按钮。虽然这是可以理解的，但您会采用什么方法来解决这个问题？我找到的唯一方法（我不打算这样做，因为它打破了响应式设计的想法）是将vertical-align设置为top，将height设置为固定的像素高度。

要明白我的意思，你可以看看[这个小提琴] [1] 在Chrome中，按钮的高度会有所不同。在Firefox中，高度将是相同的。原因是两个日本文本将使用不同的字体呈现（Yu Gothic和Simsun，具体取决于使用的字形。

有什么想法吗？

[1]: https://jsfiddle.net/sxg78tom/3/

Answer 1

你可以利用这个：小提琴：https://jsfiddle.net/3u1wahy9/

将input elements (in this case the buttons)包裹在CSS样式为inline-flex的div中，这将使所有元素变得灵活，即使它们获得相同的高度。希望，这有帮助。

div{
  display:inline-flex;
}

<div>
<input id="hej" type="submit"  value="ファイルの" style="vertical-align:top;font-size:1em;"/>
<input id="hej2" type="submit"  value="選択" style="vertical-align:top;font-size:1em;" />
</div>

本地化打破按钮高度

1 个答案: