时间戳

首页 > 解决方案 > 如何将特定于浏览器的 CSS 组合在一起？

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

问题描述

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

/*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;
   }
}

谢谢

标签： css

解决方案

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

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

推荐阅读