Firefox(火狐) 下 text-overflow:ellipsis 的省略号会浮动在上面

text-overflow:ellipsis 属性通常用于隐藏超出长度的文本,并在文本最后面增加省略号。
如果在网页的交互等过程中,出现一个新层(例如鼠标移动到下拉菜单,弹出下拉菜单内容),在 Firefox 下,文本内容当然会被新弹出内容遮住,但是省略号并不会。它会出现在新层的上面。

如果你也遇到了这个问题,解决方法很简单,只需要为新弹出的覆盖层的 z-index 属性赋值为 >1 的数值即可,这样就可以解决了。你可以在上面的 Demo 中,使用 Firebug 增加一下。

cursor — 定义鼠标样式

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

  • [<uri> ,]*: 根据用户定义的资源显示
  • auto: 正常鼠标
  • crosshair: 十字鼠标
  • default: 默认鼠标
  • pointer: 点状鼠标
  • move: 移动鼠标
  • e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
  • text: 文字鼠标
  • wait: 等待鼠标
  • help: 求助鼠标
  • progress: 过程鼠标
  • inherit: 继承

CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下:

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;

主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下。

下面是CSS判断是PC端还是移动端
其实很简单,用CSS3的媒体查询就可以非常方便去实现,不需要用userAgent神马的那么麻烦。

/*最小宽度800就是PC端*/
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}
/*最大宽度799就是移动端*/
@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

知道了上面2点就可以实现响应式布局了,是不是非常简单?
移动端还有一些特殊的事件(手指滑动)神马的,后续我再专门写篇移动端的JS文章好了。

ie6的max-width问题解决方案

最大宽度对页面布局来说在很多情况下会经常用到,但是万恶的IE6是不支持的,如果非要兼容IE6的话 没有什么办法只能靠JS解决了,用expression方法直接把JS代码写在CSS里面还是比较方便的,下面是完整的代码。
[css].mydiv{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}[/css]

给TR加边框的问题

遇到需要给TR加边框的需求,一定很头疼,因为目前还没发现有什么完美的方法解决这个问题,为了兼容性最后我只能选择给TD上下加边框,然后用JS判断第一个TD和最后一个TD的左右边框。
如果不考虑IE6和IE7的话用下面的最简单方法也可以,只是谷歌和火狐有点区别,还有一点小闪动现象。

提示:你可以先修改部分代码再运行。

行级元素和块级元素

整理一下:

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素”a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
块元素(block element)
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级容易,也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
* h2 – 副标题
* h3 – 3级标题
* h4 – 4级标题
* h5 – 5级标题
* h6 – 6级标题
* hr – 水平分隔线
* isindex – input prompt
* menu – 菜单列表
* noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript – )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol – 排序表单
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 非排序列表

内联元素(inline element)
* a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* bdo – bidi override
* big – 大字体
* br – 换行
* cite – 引用
* code – 计算机代码(在引用源码的时候需要)
* dfn – 定义字段
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* kbd – 定义键盘文本
* label – 表格标签
* q – 短引用
* s – 中划线(不推荐)
* samp – 定义范例计算机代码
* select – 项目选择
* small – 小字体文本
* span – 常用内联容器,定义文本内区块
* strike – 中划线
* strong – 粗体强调
* sub – 下标
* sup – 上标
* textarea – 多行文本输入框
* tt – 电传文本
* u – 下划线
* var – 定义变量

火狐浏览器图片加载失败不显示占位符的解决方法

很多web开发人员都喜欢使用火狐浏览器来调式页面,也包括我,当然我也喜欢chrome调css更舒服,firefox调js比chrome舒服(看断点和json界面好一些)。还有各自的控制台信息也有不同,报错的时候可以同时看一下有时候不一定哪个浏览器的错误信息更定位准确一些。

废话说了不少,接下来是重点了,firefox最不爽的一个地方就是图片加载失败不显示占位符这让我们这些做布局的人情何以堪,不明白浏览器的开发人员为什么要这样做,而且还不能设置。
解决办法就是自己定义一个样式文件放到配置目录下面。
1. 新建一个userContent.css。内容如下:

[css]/*
*显示缺失图像占位符
*/
@-moz-document url-prefix(http),url-prefix(file)
{
img:-moz-broken
{
-moz-force-broken-image-icon: 1 !important;
width: 24px;
height: 24px;
}
}[/css]

2.把这个css文件放到你的配置目录下面
xp用户路径地址:C:\Documents and Settings\用户名\Application Data\Mozilla\Firefox\Profiles\不固定字符串.default\chrome
win7用户路径地址: C:\Users\用户名\AppData\Roaming\Mozilla\Firefox\Profiles\不固定字符串.default \chrome

PS:如果你的路径里面没有chrome这个文件夹就自己手动新建一个,我的电脑就没有,最后重启浏览器就OK了。

九宫格布局

据说业界比较有名气的司徒正美被这道题给难住了。来自一淘的 WEB 前端的面试题,题目要求如下:
使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。
题目不难,主要还是考察面试者对 CSS 灵活运用程度。

4F3B001DFEC59B65B196E4E1FCA151B65088292D5689A_170_170

下面是我写的方法,欢迎参考~

提示:你可以先修改部分代码再运行。

title 换行

html里title属性换行的方法

众所周知,对于链接和图片,我们可以通过添加title属性以显示一些说明文字,一般情况下,这些文字都是显示成一行,那么有没有办法让它以多行的方式显示呢?解决的方法有两种:

1.将title属性分成几行来写,例如:

[html]<a href=#" title="说明一
说明二
说明三">点我</a>[/html]

不过这样会显示出来多余的br 演示效果点我

2.第一行相对来说不够直观,我们还可以在需换行的地方添加 (将&改为半角,下同)或 来实现:

[html]<a href=#" title="说明一&#10;说明二&#10;说明三">点我</a>
<a href=#" title="说明一&#13;说明二&#13;说明三">点我</a>[/html]
像这样就完美了 点我

顺便说一句,在这个特殊符号对照表里面可以找到很多有趣的东西~ http://liuxiaofan.com/?p=804

3列、2列自适应布局,中部内容优先显示3列布局等方法。

最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。

1. 固定宽度,中部DIV内容优先显示布局

说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

提示:你可以先修改部分代码再运行。

Read More

主流的clearfix清楚浮动原理

我目前已知的清除浮动的方法大概有3种

首先是HTML结构:

<div id="warbox" class="clearfix">
    <div id="left"&gt;Left</div>
    <div id="right"&gt;Right</div>
</div>

然后是CSS代码:

<pre class='prettyprint'>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* <a href="http://liuxiaofan.com/" title="html">html</a> .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */

Read More