CSS calc()在Chrome和firefox上不起作用 - 腾讯云开发者社区

+, firefox2+ 安卓2.3+, iOS6+ absolute + margin auto 是 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+ absolute...+ calc 是 ie9+, chrome19+, firefox4+ 安卓4.4+, iOS6+ absolute + transform 否 ie9+, chrome4+, firefox3.5+...安卓3+, iOS6+ writing-mode 否 ie6+, chrome4+, firefox3.5+ 安卓2.3+, iOS5.1+ lineheight 否 ie6+, chrome4+, firefox2...+ 安卓2.3+, iOS6+ table 否 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+ css-table 否 ie8+, chrome4+, firefox2+...安卓2.3+, iOS6+ flex 否 ie10+, chrome4+, firefox2+ 安卓2.3+, iOS6+ grid 否 ie10+, chrome57+, firefox52+ 安卓

9622 0

CSS实现水平垂直居中的1024种方式、兼容性分析（史上最全）

PC端无兼容性要求，推荐flex 移动端推荐使用flex 方法居中元素定宽高固定 PC端兼容性移动端兼容性 absolute + 负margin 是 ie6+, chrome4+, firefox2...+ 安卓2.3+, iOS6+ absolute + margin auto 是 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+ absolute + calc 是 ie9...+, chrome19+, firefox4+ 安卓4.4+, iOS6+ absolute + transform 否 ie9+, chrome4+, firefox3.5+ 安卓3+, iOS6+...table 否 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+ flex 否 ie10+, chrome4+, firefox2+ 安卓2.3+, iOS6+ grid...否 ie10+, chrome57+, firefox52+ 安卓6+, iOS10.3+

4312 0

您找到你想要的搜索结果了吗？

是的

没有找到

css3中的calc()

1.什么是calc()? calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能。用来指定元素的长度。...5.浏览器的兼容性浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，相同须要在其前面加上各浏览器厂商的识别符，只是可惜的是，移动端的浏览器还没仅有...“firefox for android 14.0”支持，其它的全军覆没。...大家在实际使用时。...相同须要加入浏览器的前缀 .elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression

5073 0

Shadow DOM 的一次挖掘 —— 揭秘 range input 的内部结构

在 Chrome 、Safari、Edge 下我们需要声明下面的 CSS 样式取消系统默认样式后才能设置我们想要的自定义样式。...不过，在 Firefox 中不是这样，因为它的大小不会受到 track 的影响，因为 track 和 thumb 是兄弟节点。...thumb Edge 和 Firefox 的 thumb 滑动区域是 range input 的内容区域。...Chrome 的滑动区域是 track 的内容区域：已填充的区域元素 (progress) Firefox 中使用 :: -moz-range-progress 伪元素和 Edge 中使用::-...但是在 Chrome 中没有提供伪元素来匹配此元素。

1.6K1 0

CSS 计算属性 calc()的完整指南（下）

从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面： calc() 只作用于属性值 calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比较...} calc()的数学运算符你已经有了+、-、*和/，但它们在使用方法上有所不同。...((100% + 2rem) / 2); } CSS自定义属性和calc() ?... div { /* Nope */ color: attr(data-color); } 不幸的是，这里没有 "类型 "在起作用，所以attr()的唯一作用是与内容属性结合的字符串。...如果你真的需要支持超远期（如IE 8或Firefox 3.6），通常的技巧是在使用calc()的属性或值之前再添加一个属性或值。

1.8K2 0

win8效果的横向布局

有一个月没写过博客了，自己的博客也没有看过，前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似win8的那种布局效果，最开始，我也没有什么头绪，然后硬着头皮做了...doctype html> css"> *{ box-sizing:border-box; padding:0;margin:0;border...*/ height:-moz-calc(100%); /*chrome safari*/ height:-webkit-calc(100%); /*Standard */ height...: none; position:relative; float:left; /*Firefox*/ height:-moz-calc(100%); /...*chrome safari*/ height:-webkit-calc(100%); /*Standard */ height:calc(100%); min-width:

2.1K3 0

前端开发知识汇总--HTML、CSS

把DOM元素从页面流中脱离或隐藏，这样处理后，只会在DOM元素脱离和添加时，或者是隐藏和显示时才会造成页面的重绘或重排，对脱离了页面布局流的DOM元素操作就不会导致页面的性能问题。...权重、特殊性分析，因为link、visited、hover、active权重特殊性均相同，所以根据使用习惯，要想让active始终有作用，需要让后者覆盖前者。...CSS3滤镜效果。参考 CSS画三角形网站。...自定义select样式 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*...代码为： div{ @wid: calc(~"100% - 115px"); width: calc(~"@{wid} / 7"); } 消除table 中th,td空隙 border-collapse

7216 1

CSS3 calc()详细介绍及使用

前言 calc()对很多同学来说，或许很陌生。看其外表像个函数，既然是函数为什么又出现在CSS中呢？这一点也让我百思不得其解。在制作页面的时候，总会碰到有的元素是100%的宽度。...calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。...浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox...大家在实际使用时，同样需要添加浏览器的前缀 .elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc...第二步，在div.box上添加border和padding 这一步很棘手的事情来了，在div.box上添加10px的内距padding，同时添加5px的border，为了更好的说明问题，我在div.demo

1.5K1 0

CSS深入理解学习笔记之overflow

作用前提：　　　　①非display:inline水平；　　　　②对应方位的尺寸限制。...定位下，overflow隐藏和滚动会失效。　　...）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera）　　overflow失效妙用：　　　　菜单栏固定显示。...的resize属性，起作用的前提是overflow不能是visible。　　...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。

4.2K5 0

冷门CSS样式

冷门但却很实用的css样式总汇 ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性，很好用，可以直接定义输入文本框里面的内容，唯一的缺点就是不能更改默认显示字体的颜色...::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox...+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox...function, 计算属性值 div { width: calc(100% - 100px); } outline属性值不知道大家有没有一个困扰，就是在写input的时候，点击的时候总会有一个很丑的蓝色描边...并且在超过行数后，在最后一行显示”…” 这是正常的展示 display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/ -webkit-box-orient

3.1K2 0

分享一些冷门但却很实用的css样式

在平常的代码工作中，有很多冷门不常用的css样式标签。有些偏门、冷门的标签一般都记不住，想起来的时候就又会去现找，很影响工作效率，现在，把这些标签都统一整理一下用的少但是超级实用的css样式。 ?...::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox...() function, 计算属性值 div { width: calc(100% - 100px); } outline属性值不知道大家有没有一个困扰，就是在写input的时候，点击的时候总会有一个很丑的蓝色描边...并且在超过行数后，在最后一行显示"..." ...caret-color: red; 暂时就记录这么多，后续将持续更新，是不是很实用，很多css样式在宁静致远、锦鲤、梦想家及博览主题都有用到，您发现了么？

4351 0

css背景图background-position百分比的理解

包括：Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ ....因此，我们在实现此类效果的时候，可能还需要留一手，如下，使用calc计算： background-position: calc(100% - 40px) calc(100% -20px); ?...其表现与CSS中其他的百分比单位表现都不一样。例如，一个图片： img { position: absolute; left: 100%; } 一定是在父容器外部。...但是，在值中，却是不一样的表现。...图片的宽度) * percentX; positionY = (容器的高度-图片的高度) * percentY; 因此，当background-position:100% 100%时候，实际定位值就是容器尺寸和图片尺寸的差异

1.5K3 0

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译前言 Broken images are ugly....如果图片没有加载出来，我们可以给alt值增加样式如果图片没有加载出来，我们可以设置:before和:after伪元素。当然，图片正常加载时是没作用的。...before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc...是没有作用的。...(Desktop)√√√Opera Mini√ **✘✘Safari (Desktop and iOS)√ *✘✘iOS Webview (Chrome, Firefox, others)√ *✘✘

8313 0

手把手教你打造全宇宙最强 Firefox 浏览器

但 Firefox 既然能和 Chrome 在同一个牌桌上同台竞技，它必然是有过人之处的。...之后我们就可以在 chrome 文件夹内自行创建 userChrome.css 和 userContent.css 这两个样式定义文件，在其中进行自定义即可。...说白了，userContent.css 可以实现和 stylus 这一类扩展同样的功能，唯一的区别在于 userContent.css 还可以定制 Firefox 内置页面和扩展页面的样式（比如内置的新标签页...例如，如果你想像文章开头截图那样将 about 界面的 Logo 替换成别的图片，只需在 userChrome.css 中添加这么一段 CSS 样式： @-moz-document url("chrome...重启 Firefox 浏览器。现在你就可以在 chrome 文件夹根目录创建自定义脚本来实现任意功能了。

2.2K3 0

【CSS】636- 你必须记住的30个css选择器

web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。...除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 2....使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 6....:hover伪类作用于点击过的链接。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 7....与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。

8783 0

【CSS】965- 5种实现CSS底部固定的方法

"> content css...{ padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; } 方法三：使用calc...: .content { min-height: calc(100vh - 70px); } .footer { height: 50px; } 给70px而不是50px是为了为了跟底部隔开20px...1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; } grid早于flexbox出现，但并没有flexbox被广泛支持，你可能在chrome...Canary或者Firefox开发版上才可以看见效果。

1.3K3 0

10分钟内就可以学会的几个CSS高招

我在超过75000条的调查回复中发现，CSS的难度位居榜首，因为它是 Web 开发人员必须掌握和使用的技术，同时，也是他们觉得最痛苦的技术。...CSS 中与布局和位置相关的所有内容都受框模型的影响，如果你打开 chrome 开发工具，你可以看到如何在页面上的任何元素计算框模型。 ?...2、 Firefox 很棒这给我带来了第二个提示，在调试 CSS 时不要使用 chrome，而Firefox，他们的开发工具通常更胜一筹，尤其是在 CSS 方面，如果我检查元素，我会像在 Chrome...8、花式计算现在，CSS 并不是传统意义上的真正编程语言，但它确实具有使用 calc 函数运行基本计算的能力，它允许你使用一些基本数学计算一个值。...而且，现在我们可以处理无限数量的元素，而不会增加我们的 CSS 占用空间，这要归功于 calc 和变量的组合能力。

1.4K2 0

论如何利用可控参数拼接完成RCE

很容易理解这个使用方式，这里补充一点就是createprocess并不是cmd，不能用cmd里的命令方式来分割执行别的程序比如calc && notepad其中的notepad并没有正常运行。...="cmd.exe" 在老版本的Chrome里是可以执行cmd.exe的 0x01 Chrome系列浏览器有了前面的认知，我们逐渐切合到场景中，假设这个注入的地方限制了只能使用浏览器。...="cmd.exe" 在新版本Chrome里必须要加no-sandbox，因为不加的话由于有sandbox的作用所以会导致cmd不执行。...插入下面参数 -greomni "\\remoteHost\omni.ja" -appomni "\\remoteHost\omni2.ja 最终造成rce，大致的影响版本在firefox74以下，大概是一年前的版本...这个图里第一个和第二个分别是原进程和firefox进程，可以看到划线的地方都没有空格，看起来并没有分割。

3491 0

官宣 CSS 支持三角函数，未来会是什么？

，CSS 3 带来的新变化主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块，大大丰富了开发者的想象力与创造力。...虽然目前 CSS 标准已经支持以下数学函数：计算基本表达式 - calc() 返回最小值 - min() 返回最大值 - max() 获取上限和下限之间的中间值 - clamp() 但是这远远不够，开发者一直需要它拥有处理图形角度并执行一些更高级数学运算的能力...在开发者强烈的要求下，W3C CSS 工作组终于正式宣布批准在 CSS 标准中加入了一系列数学运算函数。看到这样的消息，不少开发者都沸腾了。...他认为 CSS 应该轻量级，孤立的 Chrome 实例意味着不同的视图不能共享内存，所以必须复制一大堆东西，这样会导致内存冗余。...此外还有人认为官方是想让 Sass 中的所有内容成为 CSS 中的标准，也有人顺手吐槽了一把 Firefox：RIP my Firefox。你怎么看呢？

5133 0

CSS-垂直|水平居中问题的解决方法总结

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。...在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6...display:table-cell;/*IE8以上及Chrome、Firefox*/ 6 vertical-align:middle;/*IE8以上及Chrome、Firefox*/ 7 }...哈哈，是啊，伟大而又神奇的css，总是给我们惊喜。这就是我爱它的原因吧。　　可能你现在会想到或已经知道有一个css属性可以做计算，没错！就是calc(). 　　...这个属性我看过一片前辈大神的博客，用法讲的很详细，链接贴在这里了：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 　　但我想

2.5K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CSS实现水平垂直居中的1010种方式（史上最全）

CSS实现水平垂直居中的1024种方式、兼容性分析（史上最全）

css3中的calc()

Shadow DOM 的一次挖掘 —— 揭秘 range input 的内部结构

CSS 计算属性 calc()的完整指南（下）

win8效果的横向布局

前端开发知识汇总--HTML、CSS

CSS3 calc()详细介绍及使用

CSS深入理解学习笔记之overflow

冷门CSS样式

分享一些冷门但却很实用的css样式

css背景图background-position百分比的理解

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译

手把手教你打造全宇宙最强 Firefox 浏览器

【CSS】636- 你必须记住的30个css选择器

【CSS】965- 5种实现CSS底部固定的方法

10分钟内就可以学会的几个CSS高招

论如何利用可控参数拼接完成RCE

官宣 CSS 支持三角函数，未来会是什么？

CSS-垂直|水平居中问题的解决方法总结

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐