CSS边框显示问题，与Chrome和Safari不同 - 腾讯云开发者社区

文章/答案/技术大牛

发布

CSS入门总结（下）

下面把CSS做一个梳理并主要介绍一下发生变化的模块内容：选择器： CSS3对选择器做了更详细的划分： ? 背景和边框 1) 通过传统CSS创建一个带圆角的边框是很麻烦的。...box-shadow: 10px 10px 10px #888; 3）border-image：我们可以设置不是纯色的边框啦，可以加进去带图片的边框，因为浏览器内核的不同，为保证兼容，要考虑不同浏览器的情况...and Chrome */ } 5）matrix()包含旋转，缩放，移动（平移）和倾斜功能。...div{ transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ } 2）rotateY...div{ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ } 多列布局

1.2K2 0

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

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。...class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 4....与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。...h1标题的后面显示一张图片。...如上图所示，唯一的问题是，边框将被应用到无序列表的顶部和底部-看起来很奇怪。让我们使用:first-child和:last-child伪类来解决此问题。

9973 0

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

是的

没有找到

一篇文章带你了解CSS基础知识和基本用法

:120px;height:60px;background-color:red'>Css注释注：与Html 不同，它的注释方式是：/* Css语句*/ 2.Css的选择器为什么一开始要讲选择器了...和 Chrome */ -o-transition: width 1s; /* Opera */ } transition-property:应用过渡的Css属性的名称比如宽度width transition-duration...:30px; /* Safari 和 Chrome */ column-gap:30px; } 规定列之间30像素的间隔 3)).列规则 div { -moz-column-rule:1px dotted...div { columns:10px 3; -moz-columns:10px 3; /* Firefox */ -webkit-columns:10px 3; /* Safari 和 Chrome...在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

11.8K2 0

Normalize.css ——CSS Reset的友好替代品

* 校正IE 8/9， Safari 5 和 Chrome中样式不呈现的问题 */ abbr[title] { border-bottom: 1px dotted...font-weight: bold; } /* * 校正 Safari 5 和 Chrome 中样式不呈现的问题 */ dfn { font-style...更正 Firefox 4+， Safari 5 和 Chrome 中外边距不同的问题 */ button, input, select, textarea...校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 * 2....校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (include `-moz` to future-proof)

2.5K9 0

web前端面试中10个关于css高频面试题,你都会吗?

图片边框 FF 3.5, Safari 4, Chrome 3 text-overflow 文本截断 IE6+, Safari4, Chrome3, Opera10 word-wrap 自动换行 IE6...+, FF 3.5, Safari 4, Chrome 3 border-radius 圆角边框 FF 3+, Safari 4 , Chrome 3 opacity 不透明度 all box-sizing...控制盒模型的组成模式 FF3+, Opera 10, Safari 4, Chrome 3 outline 外边框 FF3+, safari 4, chrome 3, opera 10 background-size...不指定背景图片的尺寸 safari 4, chrome 3, opera 10 background-origin 指定背景图片从哪里开始显示 safari 4, chrome 3, FF 3+ background-clip...开发中为什么要初始化css样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 10.

2.9K2 0

解决Chrome或其它WebKit浏览器input和textarea的黄色蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象，在Chrome浏览器下，输入框有一个黄色的边框；而在其它WebKit浏览器（如Jeff使用的傲游浏览器）下，输入框的颜色是蓝色的（见下面的图片）。...Jeff以为是那里定义了颜色的样式，在开发者工具里找啊找也没发现属于黄色或蓝色的css代码。后来搜索搞定了，原来是css默认的问题。 input和textarea的黄色/蓝色边框问题图示 ? ? ?...input和textarea的黄色/蓝色边框问题的原因与解决方法由于不同浏览器对outline这个css属性默认情况不同所致。...解决方法是定义outline属性为none，即将下面的css代码加入相对应的选择器中。 input,textarea{outline:none;} 或者加入到css重置中一劳永逸。...关于outline属性（来源于w3school） outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。

2.3K6 0

在 css 图层分析这方面，Chrome Devtools 属实不太行

没听错，确实是 safari 的，不是 chrome devtools，图层分析上 chrome devtools 不太行，具体情况后面说。...右边的三个按钮分别是显示边框、绘制时显示红色背景，显示页面中所有的层，都勾选上。显示边框就是会给每个图层加上绿色边框，可以直观地看到有哪些区域是在单独的图层渲染的。...Chrome Devtools 的图层分析工具不是我故意黑 Chrome Devtools 的 Layers 工具，确实是不咋滴：首先，界面丑，特别是显示所有图层那里，没有显示图层总数、占据的内存...，也不能直接跳到元素，这点不如 Safari Devtools：对比下 safari 的：最重要的是图层创建的原因显示的不行：显示的信息不够友好：有的甚至都没显示原因：综合看下来，在图层调试工具上...Chrome Devtools 也有 Layers 工具，但在 css 图层分析这方面，Chrome Devtools 属实不太行。

7562 0

iOS Safari 中的 CSS drop-shadow 渲染异常问题分析与解决方案

本文将深入分析 iOS Safari 中 CSS filter: drop-shadow() 属性的一个特殊渲染问题，并提供多种解决方案。...问题描述在 iOS Safari 中，当我们使用 CSS filter: drop-shadow() 结合 transform 或绝对定位将元素移出可视区域时，阴影效果可能会出现部分显示或完全不显示的情况...这段代码在安卓和PC上OK，在IOS的Safari下异常。...视口和初始渲染计算元素相对于视口的初始位置可能影响 Safari 如何计算和应用 filter 效果，特别是当元素位于页面顶部附近时。不要让原图实际位置在视口之外4....这个问题也提醒我们，在使用高级 CSS 特性时，始终要考虑不同浏览器的实现差异，并进行充分的跨平台测试。希望这篇文章对你在处理 iOS Safari 中的 CSS 渲染问题时有所帮助。

2350 0

前端兼容性

CSS3浏览器兼容前缀内核浏览器 -webkit- webkit渲染引擎 chrome/safari -moz- gecko渲染引擎 Firefox -ms- trident渲染引擎 IE -o-...由于Chrome支持DPI，所以并不担心Web有DPI问题。但需要注意的是与手机屏幕分辨率不同，桌面分辨率要除以DPI比例，才是逻辑分辨率。...# 常见兼容性问题常见的主要是浏览器的兼容性问题，因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。...CSS兼容问题 1、不同浏览器的标签默认的内外边距不同解决方案：*{margin: 0; padding: 0;} 2、图片加a标签在IE9中会有边框解决方案：img{border: none;}...1、内容显示问题解决方案： 2、禁止iOS和Android用户选中文字解决方案：-webkit-user-select

2.1K2 0

CSS3 Border属性介绍

因为大量的图片素材对网页的加载速度影响也很大，但是由于现在的浏览器对css3的兼容与支持各有不同，所以现在要用css替代配合图片达到的效果还是不太现实。...，其他浏览器中为纯黑色边框 2、border-p_w_picpath css"> Chrome和FF3.5浏览器里能看到边框背景图使用这种图片配合css ?...+、Chrome和FF3.5浏览器里能看到圆角边框 4、box-shadow -moz-box-shadow:5px 2px 6px #000; 5px: 与左边线相对距离 2px: 与上边线相对距离...+、Chrome和FF3.5浏览器里能看到边框阴影如将扩散像素调大至16px 阴影颜色换为红色则有如下效果 ?

7653 0

CSS使用技巧

CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。 17....禁止自动换行如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：　　h1 { white-space:nowrap; } 21....important规则多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。　　...#seis { color: red } 　　/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 　　body:nth-of-type(1) #siete...{ color: red } 　　/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 　　body:first-of-type #ocho { color

1.3K1 0

【CSS使用技巧】

8942 0

40个重要的HTML 5面试问题及答案

几乎所有的浏览器都支持HTML 5，例如Safari，Chrome，火狐，Opera，IE等。 HTML 5的页面结构和HTML 4或早先的HTML有什么不同？...我们可以有与图形对象相关联的事件处理程序。分辨率独立。画布则是绘制然后遗忘。一旦绘制完成，你就不能访问和处理像素。Canvas则用于绘制和遗忘类似动漫和游戏的场画。... 请解释一下CSS盒子模型？ CSS盒子模型是一个围绕HTML元素——并且HTML元素定义了边框border，内边距padding和外边距margin 的矩形空间。...边框可以可见，也可以不可见，可以定义它的高度和宽度等。 Padding:——定义边框和元素之间的间距。 Margin:——定义边框和任何相邻元素之间的间距。 ?...例如下面就是一段简单的定义了box边框，外边距和内边距值的CSS代码。

5K13 0

Day1:html和css

Day1:html和css 了解浏览器掌握WEB标准理解标签语义掌握常用标签掌握三种列表标签前端开发工具: 浏览器是网页显示、运行的平台，IE、火狐（Firefox）、谷歌（Chrome...）、Safari和Opera称为五大浏览器。...chrome(谷歌), sublime, photoshop, ie, firefox(火狐), safari, 和 Opera. ? 效果用sublime书写代码....渲染引擎是负责网页的内容(如html, xml 图像等), 和 css, 还有计算网页的显示方式,, 进行显示, 浏览器的内核不同对网页语法的解释就会有所不同, 导致渲染的效果也不同. js引擎是用来解析...显示的内容宽度高度图像边框的宽度链接标签anchor 緢点定位 dashu <h1 id

1.2K1 0

JavaScript DOM元素尺寸和位置

总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。...PS：对于元素的实际大小，scrollWidth和scrollHeight理解如下: 1.增加边框，不同浏览器有不同解释： a) Firefox和Opera浏览器会增加边框的大小，220 x 220 b...) IE、Chrome和Safari浏览器会忽略边框大小，200 x 200 c) IE浏览器只显示它本来内容的高度，200 x 18 2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220...5.增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。...三．获取元素周边大小 1.clientLeft和clientTop 这组属性可以获取元素设置了左边框和上边框的大小。

2.9K7 0

【FE前端学习】第二阶段任务-基础

Firefox */ } CSS3 边框阴影 div { box-shadow: 10px 10px 5px #888888; } CSS3 边框图片 div { border-image:url...和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } CSS3 background-size 属性 div...: rotateX(120deg); /* rotateY(130deg); */ -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -...2s; CSS3 多列 div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */...代表与或非和C语言一样的？：三目运算符 variablename=(condition)?

5.4K1 0

使用css3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域，类似圆角矩形把文字环绕起来，特别有感觉，于是就试着用图片边框来修饰，但是用图片过多会拉慢网页的加载速度，能不能使用css3来实现边框圆角效果呢？...当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari...Safari 实现圆角 Firefox 和 Safari 使用私有属性实现圆角效果; background-color: #ccc;这个表示边框内的底部图片颜色; border: 1px...来实现边框圆角效果其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari...和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性： -moz-border-radius-topleft / -webkit-border-top-left-radius

1.1K1 0

【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

本期介绍本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识文章目录 1....所以，为了提高页面加载效率，这里我们就需要学习 CSS 的精灵图和字体图标。 1.2 精灵图 1.2.1 概念精灵图，又名雪碧图，是多个小图标的集合图。...1.2.2 步骤解析 1 、在精灵图上，找到要使用的图片，测量其宽高 2、以 div 为例，为其设置和图片相同的宽高（加边框仅为了方便演示） 3、通过背景图片引入，不能重复 4、因为现在显示的背景图默认为左上角...，支持这种字体的浏览器有 IE9+ 、 Firefox3.5+ 、 Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2...，通常和精灵图结合使用，解决网页图标问题。

1.7K4 0

这30个CSS选择器，你必须熟记（下）

在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...为了兼容现有的样式标准，CSS1和CSS2里使用单冒号来表示伪元素（比如:first-line，:first-letter，:before和:after）浏览器兼容性 IE6 Firefox Chrome...Safari Opera 23、 X:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器 X:nth-last-child(n) 与 X:nth-child(n) 相反，这里从后往前数...{ border-top: none; } 假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。...浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera 小节到这里，我们终于学完了30个CSS选择器，是不是轻松许多，感谢大家的阅读，熟记这30个选择最好的办法就是经常的使用

8040 0

这30个CSS选择器，你必须熟记（下）

在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...为了兼容现有的样式标准，CSS1和CSS2里使用单冒号来表示伪元素（比如:first-line，:first-letter，:before和:after）浏览器兼容性 IE6+ Firefox Chrome...Safari 23、 X:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器 X:nth-last-child(n) 与 X:nth-child(n) 相反，这里从后往前数，...{ border-top: none; } 假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。...浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera 小节到这里，我们终于学完了常用的30个CSS选择器，是不是轻松许多，感谢大家的阅读，熟记这30个选择最好的办法就是经常的使用

5942 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CSS入门总结（下）

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

一篇文章带你了解CSS基础知识和基本用法

Normalize.css ——CSS Reset的友好替代品

web前端面试中10个关于css高频面试题,你都会吗?

解决Chrome或其它WebKit浏览器input和textarea的黄色蓝色边框问题

在 css 图层分析这方面，Chrome Devtools 属实不太行

iOS Safari 中的 CSS drop-shadow 渲染异常问题分析与解决方案

前端兼容性

CSS3 Border属性介绍

CSS使用技巧

【CSS使用技巧】

40个重要的HTML 5面试问题及答案

Day1:html和css

JavaScript DOM元素尺寸和位置

【FE前端学习】第二阶段任务-基础

使用css3来实现边框圆角效果

【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

这30个CSS选择器，你必须熟记（下）

这30个CSS选择器，你必须熟记（下）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐