小松 发布的文章

chrome下固定定位元素在锚点跳转时显示不全

做项目时遇到两次，就纪录下来。（仅在chrome下出现此bug）

产生条件：

  • 1.锚点链接上绑定了点击事件；

现象：

在chrome下测试发现，绝对定位的元素只显示一部分，但是稍微滚动滚动条或者改变窗口大小后又正常了。

原因：

个人觉得：跟浏览器渲染，在点击页面内锚点时触发了默认的跳转锚点的动作和绑定的click事件，两个同时执行后绝对定位元素渲染出bug

解决方案：

  • 1.点击事件内加return false来阻止默认行为；（可行性不高，因为阻止了锚点跳转，但是也能解决显示不全的问题）
  • 2.绑定的事件写在setTimeout内，延迟执行;（能满足大部分需求）

演示代码：

DEMO

针对各浏览器的css hack

    /* IE系列的专用hack使用时请注意顺序可能会有影响 */
    .hack { background: #ff0\9; } /*IE*/
    .hack { background: #f0f\0; } /*IE89*/
    .hack { background: #f00\0/; } /*IE8*/
    .hack { +background: #0f0; } /*IE67*/
    .hack { _background: #00f; } /*IE6*/
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .hack { background: #ccc; } } /*Opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0) { .hack { background: #f60; display: block; } } /* Webkit */
    @-moz-document url-prefix() { .hack { background: #fff; } } /* Firefox */

有什么问题请留言！

多行文本或未知宽高的图片垂直居中

项目中经常会遇到多行文本或未知宽高的图片垂直居中，同事提供的一种近乎万能的方法，备份下来：



据英国媒体报道，本月10号，自2000年以来历时最长的月全食将发生，全球多个地区如半个非洲、中东地区、包括中国在内的亚洲中部等地区以及澳大利亚西部的人们均可以观察到这次月全食。

#text { width: 400px; height: 400px; border: 1px solid #f00; display: table-cell; vertical-align: middle; position: relative; }
#text .box { *position:absolute; *left: 0; *top: 50%; }
#text .box p { *position: relative; *top: -50%; }

2011年12月14日更新css如下：（支持最外层元素浮动）


.text { width: 400px; height: 400px; border: 1px solid #f00; display: table; vertical-align: middle; text-align: left; *position: relative; }
.text .box { display: table-cell; vertical-align: middle; *position:absolute; *top: 50%; }
.text .box p { *position: relative; *top: -50%; }

demo下载：vertical.zip