理想乡

标签: CSS

新版Chrome如何实现-webkit-text-size-adjust属性

在Chrome浏览器下中文竟然不能设置小于12px,今天在帮助朋友修改东西的时候发现这个奇葩的设置。在Chrome27版本之后-webkit-text-size-adjust属性就变为不可识别。

继续阅读

Block Formatting Context是什么?

今天翻看博客时,偶然看到一个面试题,在解答过程中说到了"BFC",遂百度之.发现自己真是孤陋寡闻了.

1.Block Formatting Context 是什么?

BFC=Block Formatting Context(块格式化上下文),它是CSS中一个重要的概念,理解了它,我们也就能好的理解一些布局.下面是来自Mozilla Developer Center的定义.

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

2.触发条件

  • root元素
  • float(none以外的值)
  • position(absolute或fixed)
  • display等于inline-block
  • display等于table-cell
  • display等于table-caption
  • overflow(除了visible以外的值)
  • flex boxes(display等于flex或inline-box)

3.Block Formatting Context的作用

  1. Block Formatting Context会阻止边距折叠
  2. Block Formatting Context可以包含内部元素的浮动
  3. Block Formatting Context可以阻止元素覆盖浮动盒模型

4.更多资料

以上是一些基础概念,更详细的介绍可以在下面的链接中查看

为IE整圆角和透明度的问题

之所以写这个,是因为自己弄主题的时候碰到了这个问题呢,也不得不感叹IE浏览器就是跟不上时代的潮流。写这个也孩子是为了给自己增加下熟练度。就这样吧:

首先是透明度的

  1. .transparent_class {  
  2.       filter:alpha(opacity=50);  
  3.       -moz-opacity:0.5;  
  4.       -khtml-opacity: 0.5;  
  5.       opacity: 0.5;  
  6. }  

 

接下来是圆角,这个感觉有点问题,我实际使用的时候不满意,方法就是要链接一个微软的脚本文件.

CSS如下所示:

  1. .main{  
  2. border: 2px solid #C0C0C0;  
  3. -moz-border-radius: 10px;  
  4. -webkit-border-radius: 10px;  
  5. border-radius: 10px;  
  6. position:relative;  
  7. z-index:2;  
  8. behavior: url(此处为ie-css3.htc文件的绝对路径);  

为实现:

  1. border-radius: 10px;     

就要链接上htc文件.

 

注意

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性:position:relative;

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大.

 

 

 

http://u.115.com/file/f07da5e8f7

Copyright © 2017 理想乡

Theme by Anders Noren顶部 ↑