【问题标题】:Chrome CSS behaviour vs other popular browsersChrome CSS 行为与其他流行浏览器
【发布时间】:2017-09-05 10:20:27
【问题描述】:

与 Mac 上的最新版本 Firefox 和 Safari 以及 PC 上的 IE 相比,我真的很难协调 Chrome 的特定行为。

比较屏幕截图在底部显示 Chrome 中的问题:

https://screencast.com/t/Tj07m3Q0fX9

仅适用于此的相关 CSS,包括剪切路径。

.top1 {
background: none repeat scroll 0 0 #6dcff6;
display: inline-block;
margin: auto;
padding-bottom: 10px;
padding-top: 22px;
width: auto;
clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
}

当这个网站启动时,一切都很好,这让我相信这可能是更新中可能引入的特定行为。导致我出现问题的原因是所有代码看起来都很好,它在大多数 Mac 浏览器和 PC 上的 IE 中运行良好(无法在 PC 上的 Chrome/Firefox 上测试它)。

感谢您的帮助!

【问题讨论】:

  • 请发布您的代码以帮助您...
  • 您需要在此处发布导致问题的标记的最小示例。指向您网站的链接,明天可能会改变,对任何人都没有帮助,而且只会很快删除您的问题。 stackoverflow.com/help/mcve
  • 尝试从.top1clip-path 中删除它:polygon(0 100%, 0 0, 100% 0, 80% 100%);
  • 仅显示您的 CSS 仍然无法遵循要求问题示例的规则,并且由于您更改了您的网站以进行修复,这个问题不再帮助未来的访问者遇到同样的问题,应该已删除。
  • 我不同意它对任何人都没有帮助 - Konstantinos 下面的 cmets 在与屏幕截图的上下文中查看时确实非常有帮助,特别是 caniuse 链接。我总是忘记海报需要多么小心地踩到这里才能不违反规则以及那些只喜欢监管它们的人,我建议即使这个页面在我看来对其他人有价值,你做任何你觉得舒服的事。

标签: css google-chrome


【解决方案1】:

在 style.css:331 上删除以下行

clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);

【讨论】:

  • 谢谢。那很完美。为什么这会干扰 Chrome 而不是其他?
  • 你可以看看这个:caniuse.com/#search=clip-path。据我检查您的网站,我可以看到唯一真正识别该属性的浏览器是谷歌浏览器。很高兴我帮助了你! :)
猜你喜欢
  • 2021-10-18
  • 1970-01-01
  • 1970-01-01
  • 2011-07-31
  • 2015-08-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-09
相关资源
最近更新 更多