css补充学习(关于浏览器兼容问题)

1. -webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%


原理:iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

功能:text-size-adjust 设为none或者100%关闭字体大小自动调整功能.

2. a:focus{ outline: thin dotted}

:focus 选择器用于选取获得焦点的元素。所有主流浏览器都支持 :focus 选择器。

注释:如果 :focus 用于 IE8 ,则必须声明 。

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

注释:轮廓线不会占据空间,也不一定是矩形。


3.audio:not([controls]) {display: none;height: 0}

功能:audio:not([controls]){display:none;/*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/

功能:height:0;/*解决iOS5移动端显示多余高度的兼容性问题。 */}

4.box-sizing属性可以为三个值之一:content-box(default),border-box

content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

5.white-space 属性设置如何处理元素内的空白。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

normal默认。空白会被浏览器忽略。

normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到<-br->
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

6.text-transform-- 定义文本的大小写状态,此属性对中文无意义




囧:这些不经常用,今天才刚刚知道。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,090评论 2 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,410评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,908评论 0 2
  • GCD是多线程编程中很常用的技术,同时,作为一项重要的知识点,在面试中也是“常来之客”,本文通过API进行GCD的...
    郑明明阅读 5,292评论 0 6

友情链接更多精彩内容