Html / CSS渲染问题 [英] Html/CSS rendering issue

问题描述

您好，我有一点烦恼但我无法弄清楚发生了什么。



转到这个片段并在Edge，Chrome，Firefox和IE中试用。当您将鼠标放在每个下拉列表上时，项目会正确显示，但如果您将鼠标放在项目上，则根据浏览器的不同，会显示1px的边距。只有Firefox能够在两个下拉菜单中正确呈现它。



问候，

Miguel。



我尝试了什么：



我试图使用div而不是ul / li和flexbox显示但是问题坚持。

Hello, I have a little but annoying issue and I can't figure out what is happening.

Go to this snippet and try it in Edge, Chrome, Firefox and IE. When you put your mouse over each dropdown the items are displayed correctly, but if you put your mouse over an item, depending on the browser, a 1px margin is shown. Only Firefox is capable to render it correctly in both dropdowns.

Regards,
Miguel.

What I have tried:

I tried to use div instead of ul/li and flexbox displaying but the issue persists.

推荐答案

可能会有高度变化影响。这段代码可以帮到你

Hi,May be height changes will affect.This code may help you

div.oddity-dropdownlist span{
  min-height:19px;
}
div.oddity-dropdownlist button{
  min-height:37px;
  vertical-align:top;
}

或

or

div.oddity-dropdownlist span{
  height:19px;
}
div.oddity-dropdownlist button{
  height:37px;
  vertical-align:top;
}

这篇关于Html / CSS渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！