firefox 的 fixed 滚动 bug

这个 bug 很纠结,让我觉得这篇文章的题目到底能否让人理解,不废话了,先来描述下这个 bug:

在 firefox 中,如果 A 元素的 position 值是在拖动滚动条的时候变成 fixed, B 元素也在拖动滚动条时 position 的值变为 fixed,并且 B 元素水平方向只有 right 值,那么当 A 元素固定的时候,B元素就会向左移动 10px,具体看 demo。

猛击demo ☻

这个 firefox 的固定宽度计算 bug 我在网上搜索好久,也没搜到原因,连问题本身都没搜到多少,只看到了一个解决的办法,要是有知道朋友,欢迎留言探讨:)

解决方法:给抖动的元素加上 overflow : auto ;

Block Formatting Context 能帮助我们做什么?

Block Formatting Context(块格式化上下文)是个很重要的概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

举个好理解的例子:可以把页面想象成一个社区,这个社区里的建筑就是 HTML 元素。而为了避免不同社区里的建筑相互混淆,开发商都是把建筑建在自己的社区里,这样的话无论开发商怎么盖楼,都不会影响到其它社区,那么这个社区的范围就可以被想象成 Block Formatting Context。

由于在 IE8 之前的 IE 版本中,规范中没有提及 Block Formatting Context 的概念,而是用私有属性 hasLayout 来达到相似的目的。两者都是决定了对内容如何定位及大小计算的规则,以及与其它元素的相互作用的规则,但它们对一类事物的不同理解,以及它们的启用条件也都不尽相同,所以很多兼容性的问题都是因它而起。

可生成 Block Formatting Context 的 CSS 特性:

  • float: ( 除 none 外的任何值 )
  • overflow: ( 除 visible 外的任何值 )
  • display: ( table-cell,table-caption 或 inline-block )
  • position: ( 除 relative 和 static 外任意值 )

可触发 hasLayout 的 CSS 特性:

  • display: inline-block
  • height: ( 除 auto 外任何值 )
  • width: ( 除 auto 外任何值 )
  • float: ( left 或 right )
  • position: absolute
  • writing-mode: tb-rl
  • zoom: ( 除 normal 外任意值 )

继续阅读 Block Formatting Context 能帮助我们做什么?

三种纯CSS实现三角形的方法

tip-triangle

看到像上图这样的 tip 的小三角,你会怎么办?

切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:)

纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩!

1.利用 border 属性实现三角形

这个原理很简单,我我们先看下面的图,这是一个边框为 20px 的 div,看他的边框,是个梯形,变化会从这里开始。

div-border-20

CSS:

.triangle{
    width:30px;
    height:30px;
    border-width:20px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

好的,现在我把它的宽和高都设为 0,看看有什么变化。

继续阅读 三种纯CSS实现三角形的方法

用好负边距,省时又省力

说到负边距,广大的前端兄弟们肯定不会陌生,外边距 margin 的作用是增加容器与容器的间距,而负值则是减少间距。在平时的工作中,用好负边距,不仅能让我们的代码更优美,还能很大的提高工作效率。

以下一些例子是我平时工作上碰到的,还有些是在网上学习时见到的,一并列出来,和大家一块分享,一共6个,以后碰见了新的用法我会再更新上来。

1.在滑动门导航中的应用

这个例子中主要是用负边距去遮挡了 nav 的下边框,然后当哪个导航标签被选中的时候,替换下边框的颜色就行了,算是一种障眼法吧,哈哈!

sliding-doors

CSS:

.nav {
list-style:none;
*overflow:hidden;
}
.nav li {
*position:relative;
float:left;
padding:5px 20px;
margin-left:10px;
margin-bottom:-2px;
border:2px solid #65B453;
border-radius:4px;
background:#0C7823;
font-size:14px;
color:#fff;
}
.nav .hover {
background:#E9FBE4;
border-bottom:2px solid #E9FBE4;
color:#0F6621;
}
.content {
clear:both;
width:340px;
height:150px;
border:2px solid #65B453;
border-radius:4px;
background:#E9FBE4;
}

继续阅读 用好负边距,省时又省力