CSS FireFox and IE 换行问题解决方案
/* 禁止换行 */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* 强制换行 */
.break{word-break:break-all;}
css强制不换行
div{white-space:nowrap;}
css自动换行
div{ word-wrap: break-word; word-break: normal; }
css强制英文单词断行
div{word-break:break-all;}
大家都知道连续的英文或数字会把DIV或表格边框撑破,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!
对于div
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
eg.
ddd1111111111111111111111111111111111111111111111111111111111111111111
效果:可以实现换行
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
eg.
ddd1111111111111111111111111111111111111111111111111111111111111111111
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed;
eg.
abcdefghigklmnopqrstuvwxyz 1234567890
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
eg.
abcdefghigklmnopqrstuvwxyz 1234567890
效果:可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890
效果:两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
eg.
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890
这里单元格宽度一定要用百分比定义
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义
css
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap
相关文档:
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。
使用方法:
//压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css ......
地震 网站变成灰黑色 css 代码
5.19-5.21为全国哀悼日, 百度、网易、新浪等各大网站均变成了灰黑色网页。怎样使网页变成灰黑色呢?
国务院决定5月19日至21日为全国哀悼日为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。
html {...}{ filter:progid:DXImageTransform.Microsoft.BasicImage(g ......
css-body背景渐变色的CSS
一、从上往下渐变
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50 ......
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
先来看下position各属性的解释
absolute
: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom&q ......