Css 当用户点击IE11时，按钮切换IE11上的高度变化

我在使用Internet Explorer 11时遇到了一个奇怪的问题。在这里，我在垂直方向上使用一个按钮切换组，如果用户单击组中的一个按钮，则单击按钮的高度会有一点变化。示例代码基于：

大胆的 斜体 强调 一个按钮呈现为：

大胆的 如果我查看CSS mat按钮切换焦点覆盖和mat按钮切换ripple mat ripple的高度是52px，而不是48px。这也会增加父元素的大小

我可以禁用.mat按钮切换的字体系列属性，再次启用该属性时，元素将恢复到原来的大小48px

---

点击按钮高度变化的原因是什么？我能做些什么吗？这只发生在IE上。

在我看来，这似乎是由单击按钮的标记之间的空白引起的问题。尝试删除标记之间的所有空白，看看是否会删除额外的4px。如果这是一个问题，您可以使用display:block解决它

将其放入您的styles.css中：

---

谢谢你的回复。你能更具体地说明你对哪些标签的意思吗？我添加了这个CSS.mat按钮切换按钮{display:block；}，但是行为还是一样的。如果在.mat按钮切换上设置行高：48px会发生什么？我认为问题是因为按钮元素是内联块元素-尝试设置display:block；在按钮元素上单击，看看是否有效。设置行高度会使其过大。关于你的第二个想法：如果我在css文件中设置它，它将不起作用。如果我这样做与IE F12中的控制台内联，那么高度不会改变。奇怪的行为。有什么想法吗？有没有可能建立一个JSFIDLE来复制这种行为？如果看不到运行中的代码，就很难进行诊断。干杯。从你最后的评论来看，你似乎已经解决了这个问题。您可以将您的解决方案作为答案，并在48小时后将其标记为可接受答案。它可以在将来帮助其他社区成员解决类似的问题。谢谢你的理解。

.mat-button-toggle-button { display: block; }