当前位置: 首页 > 面试题库 >

CSS3 calc(100%-88px)在Chrome中不起作用

丰佐
2023-03-14
问题内容

我注意到将CSS3 calc()功能用作单位width不能在最新版本的Chrome中使用。

在Chrome Developer工具中,带有的规则calc()具有 删除线 ,并在其左侧的黄色三角形中带有感叹号。这表示无法识别该属性或值。

如何使它在现代浏览器中运行?因为它是一个值而不是一个属性,所以供应商前缀在哪里?

更新:

当我说它不起作用时,我的意思是Chrome开发工具在说它无法识别我的用法width: calc(100%-88px);。我怎么知道它无法识别?由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标。


问题答案:

问题中的问题是由于减法运算符周围空间不足而引起的。

请注意,语法在二进制’+’和’-‘运算符周围需要空格。’*’和’/’运算符不需要空格。

我推测这是为了弄清楚运算符和带符号的数字之间的区别。

差: calc(100%-88px)
好: calc(100% - 88px)

我怎么知道它无法识别?由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标。

这是一个属性 袭击 在Chrome的开发者工具查看时可能是有效的,但在重载; 但是,穿过属性 在其旁边带有警告三角形图标的属性无效。

其他注意事项

  • Chrome已经支持calc()了相当长的一段时间(在OSX和Windows上已确认​​)。
  • Chrome 可能不支持其中的视口单位,例如vh / vw calc()。截至2014年末,有实施此功能的活动,但相关的bug仍未解决。
  • 在我的测试,Safari浏览器将支持calc()-webkit上OSX但不是的Windows供应商前缀。
  • IE9 +支持calc()没有供应商前缀。
  • FF支持calc()无供应商前缀。


 类似资料:
  • 问题内容: 我注意到less.js在firefox中工作,但在Chrome中不工作,或者是因为我出错了吗? 即使我尝试在Chrome中仍然无法使用,我在某个地方犯了错误吗? 问题答案: 通过您提供的链接: 如果您使用的是Chrome,Less.js浏览器脚本当前将无法使用,并且由于已知的Chrome问题,网页的路径以“file:///”开头。

  • 我有一些 在量角器中,我们搜索并找到元素,检查文本是否符合我们的期望,然后对该元素调用。测试在Chrome中运行良好,但在IE中就好像没有点击发生一样。破坏了测试。 IE 11是否支持点击

  • 我已经可以切换到iframe,然后点击图像选择[如图1所示]然后不能点击div-预览按钮[如图2-蓝色按钮]这是“应用和关闭”。 知道吗?

  • 我使用了下面的代码进行拖放。它在Firefox驱动程序中工作,但在chrome驱动程序中不起作用。 请帮忙!

  • 问题内容: 我正在尝试使用CSS属性控制Google Chrome浏览器的(可怕的)字体抗锯齿功能,但它对文本完全没有影响。 我已经比较了Photoshop中的像素,这三个像素完全相同。Chrome浏览器不再支持此属性吗? 问题答案: -webkit-font-smoothing不再起作用。Google Chrome小组有意更改了此行为。似乎以前版本的OSX并未“正确”应用字体平滑处理。

  • 但是,它在Safari中并不起作用。但是如果我们将中的高度从更改为,我们将观察到拆分器(从上到下到)变得可拖动。这意味着在Safari中不起作用。 有没有人知道如何修改代码,使拆分器在Chrome和Safari中都能工作? 编辑1: