与 Firefox 相比，Google chrome 显示了不同的结果答案

【问题标题】：Google chrome shows a different result compared to firefox与 Firefox 相比，Google chrome 显示了不同的结果
【发布时间】：2019-10-29 22:18:51
【问题描述】：

我想用 css 编辑/更改下拉样式，特别是下拉箭头。箭头在 Mozilla firefox 中看起来很完美，但在 google chrome 中它有点难看（他的边框不好）。我怎样才能在两个浏览器（firefox 和 chrome）中获得相同的结果，而在这个项目和我使用的任何项目中没有任何 1% 的差异？

此图显示了该按钮在 firefox 中的显示方式： https://ibb.co/whTPVt3 此图显示了按钮如何以 chrome 显示： https://ibb.co/35b2Y6D

HTML代码：

<select class="round">
  <option>Search type</option>
  <option>Room</option>
  <option>Device</option>
  <option>Tourist</option>
</select>

CSS 代码：

select {

  /* styling */
  background-color: #314669;
  border: thin solid #314669;
  border-radius: 50px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  color: white;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, yellow 50%),
    linear-gradient(135deg, yellow 50%, transparent 50%),
    radial-gradient(#314669 65%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

【问题讨论】：

How do I style a <select> dropdown with only CSS?的可能重复
不，不是，请仔细阅读我的问题:)
how-do-i-style-a-select-dropdown-with-only-css 展示了如何使用图像进行选择，但此请求是通过不使用图像来实现的，因此对我来说接缝不是重复。

标签： css google-chrome firefox

【解决方案1】：

在开发者工具中检查元素并在 Chrome 或 Firefox 上进行更改，然后仅为 Firefox 或 Chrome 编写 css。

目标火狐：

@-moz-document url-prefix() {
  h1 {
    color: green;
  }
}

目标铬：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .h1 {
        color: green;
    }
}

【讨论】：

【解决方案2】：

它的浏览器默认行为。如果您想在所有浏览器中获得相同的结果，请尝试使用 Bootstrap。

【讨论】：