css - 如何将特定于浏览器的 CSS 组合在一起？

Question

在开发我的网络应用程序时，我只在 chrome 中进行了测试。我已经完成了响应并想在其他浏览器中进行测试，但我看到 Firefox 和 Edge 呈现的高度不同。我的所有页面在屏幕底部都有这个白色条，看来我需要将高度延长 20 像素左右。

/*FireFox CSS*/
@-moz-document url-prefix() {
    @media (min-width: 1366px) {
        #reportPlaceHolder {
            height: 600px;
        }
    }
}

/*Edge CSS*/
@supports (-webkit-appearance:none) {
    @media (min-width: 1366px) {
        #reportPlaceHolder {
            height: 600px;
        }
    }
}

这是我目前必须解决的问题，我不确定它是否正确。

@-moz-document url-prefix() OR@ supports (-webkit-appearance:none)  { }

但我需要这样的东西，因为高度调整在 Firefox 和 Edge 上似乎是一样的。

这是示例元素的当前样式

@media (min-width: 1366px) {
    #reportPlaceHolder {
       height: 575px;
   }
}

谢谢

Answer 1

你有重置吗？大多数重置规范化元素 x-browser 之间不同的边距和填充。

解决方法: 添加重置以跨浏览器标准化边距和填充。