css - SelectOneMenu 下拉菜单在 Chrome 上运行不佳

Question

我有这个 CSS 代码，我需要对其进行调整，以便子项和父项下拉菜单相互对齐。 (如下图)

该代码适用于 IE 和 Firefox，但不适用于 Chrome。我需要修复代码以使其也能在 Chrome 上运行。

这是我的 CSS 代码:

.ui-selectonemenu .ui-selectonemenu-label {
background: #c9e9e2 !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
background: #c9e9e2 !important;
box-sizing: initial !important;
padding-right: 80px !important;
text-align: left;
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
background:#FFFFFF !important; 
text-shadow: none;
color: #444444;
 }

.selectOneMenu {
color: #444444;
font-size: 11px;
font-family: Verdana;
font-weight: 400;
height: 21px;
width: 158px !important;
}

Answer 1

我已经设法解决了这个问题。现在我的代码可以在 Firefox 和 Google Chrome 中运行。我所做的是在 .ui-selectonemenu-panel .ui-selectonemenu-list {:

下添加这几行代码

 box-sizing: inherit;
 display: inherit;
-webkit-column-width: 70px;

总的来说，我的代码是这样的:

.ui-selectonemenu-panel .ui-selectonemenu-list {
background: #c9e9e2 !important;
padding-right: 80px;
text-align: left;
box-sizing: inherit;
display: inherit;
-webkit-column-width: 70px;
 }