时间戳

首页 > 解决方案 > 与 Firefox 相比，Google chrome 显示了不同的结果

css - 与 Firefox 相比，Google chrome 显示了不同的结果

问题描述

我想用 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;
}

标签： cssgoogle-chromefirefox

解决方案

检查元素并在开发人员工具中对 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;
    }
}

推荐阅读