CSS中英文完美保证两端对齐

CSS中英文完美保证两端对齐

text-align:justify；用来设置英文两端对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。但是对于中文这样是不行的。解决办法就是设定：

text-align:justify;

text-justify:inter-ideograph;

语法：

text-justify :

auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

取值：

auto : 默认值。允许浏览器代理用户确定使用的两端对齐法则。

distribute : 处理空格很像newspaper ，适用于东亚文档。尤其是泰文。distribute-all-lines : 两端对齐行的方式与distribute 相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档

distribute-center-last : 未实现。

inter-cluster : 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。

inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效

kashida : 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

说明：设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局，所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。

以上方法对chrome（360也是chrome内核）无效，还需再加上下面代码：word-break:break-all。

如何编写兼容多浏览器的CSS代码

一个优秀的网站要尽量兼容所有浏览器，但由于浏览器类型多样（IE 5, IE 6, IE7, IE 8, Firefox, Chrome, Safari）,以及浏览器对CSS高版本的支持问题，这就给网页开发者带来诸多困难。 为了降低网页开发者寻找解决方案及编写代码的时间，我们收集了一些方法，以期能缩短开发时间，挺高网页在多浏览器中的兼容性。 IE浏览器兼容性解决方案 通过使用IE中的条件注释（Conditional comments）。 条件注释只能用于IE 5以后版本的浏览器，其他类型的浏览器将会忽略此注释。如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的 IE为标准。 条件注释（Conditional comments）示例： 条件注释（Conditional comments）说明： 1.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的 浏览器将会把它们看作是普通的注释而完全忽略它们。 2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释 里的内容。 3.条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里， 而不能在CSS文件中使用。 我们来测试一下条件注释（Conditional comments）的实际效果。 代码如下： 注：gt代表大于， lte代表小于或等于。 预览条件注释（Conditional comments）的实际效果 重置CSS各个元素的属性值 由于各个浏览器对CSS元素默认的属性值进行解析时，可能有所差异，所以我们尽量重置所需的CSS元素的属性值（CSS reset styles）。 我们常见如下所示的重置CSS默认属性值的代码： * { margin: 0; padding: 0; } 但是仅对margin和padding重置也许远远不够，下面的代码对常用的CSS元素进行了重置。 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;

CSS样式(规则)定义对话框中英文对照要点

CSS样式（规则）定义对话框中英文对照 一、【类型】 1、font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 值描述

normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承font-variant 属性的值。 2、text-transform 设置文本的大小写，只对英文字母有效。 值描述 none 无转换发生 capitalize 将每个单词的第一个字母转换成大写，其余无转换发生uppercase 转换成大写 lowercase 转换成小写 3、text-decoration 属性对文本进行修饰。 值描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承text-decoration 属性的值。 二、【背景】

1、background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 值描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承background-attachment 属性的设置。

三、【区块】 1、word-spacing属性，控制单词间的间隔。所谓单词，就是用空格分开的字符串，允许指定负长度值，这会让字之间挤得更紧。 值描述 normal 默认。定义单词间的标准空间。

兼容各个浏览器的纯CSS圆角代码

兼容各个浏览器的纯CSS圆角代码 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 代码: 注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明： 代码: 二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对， 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽. 代码: ********************************************************************* ************************************************** 三、其他兼容技巧(相当有用) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不 会.(可用!important解决)

史上最全!css命名规范(英文命名)

史上最全！css 命名规范（英文命名）一．文件命名规范 [b] 样式文件命名[/b] [quote] 主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote] 页头：header 登录条：loginbar 标志logo 侧栏sidebar 广告banner 导航nav 子导航：subnav 菜单menu 子菜单：submenu 搜索search 滚动scroll 页面主体：main 内容content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入joinus 指南guild 服务service 热点八、、hot 新闻news 下载download 注册regsiter 状态status 按钮btn 投票vote 合作伙伴：partner 友情链接：friendlink 页脚footer 版权copyright

wrap mainnav subnav footer content header footer label title mainbav ( globalnav ) topnav sidebar leftsidebar rightsidebar logo banner menu1content menucontainer submenu sidebarIcon 注释： note 面包屑： breadcrumb （ 即页面所处位置导航提示） 容器： 内容： 搜索： 登陆： 功能区： container content search Login shop( 如购物车，收银台 ) 当前的 current[/quote] [b] 网站常用中英文对照表 [/b] [quote] 网站导航 Site Map 公司简介 Profile or Company Profile or Company 公司设备 Equipment Equipment 公司荣誉 Glories Glories 企业文化 Culture Culture 产品展示 Product Product 资质认证 Quality Certification 企业规模 Scale Scale 营销网络 Sales Network 组织机构 organization organization 合作加盟 Join In Cooperation 技术力量 Technology Technology 经理致辞 Manager's oration 发展历程 Development History 外 套： 主导 航： 子导航： 页 脚： 整个 页面： 页 眉： 页 脚： 商 标： 标 题： 主导航： 顶导航： 边导航： 左导航： 右导航： 旗 志： 标 语： 菜单内容 1： 菜单容量： 子菜单： 边导航图标：

Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表 1. 此汇总表中测试浏览器的版本为： 微软系统自带：IE6、IE7、IE8 火狐：Firefox 3.6.6 Safari：Safari 5.0 谷歌浏览器：Chrome 6.0.458.1 dev Opera浏览器：Opera 10.60 2. 其中，多数CSS hack是在selector{property:value;}基础上更改的。 selector代表CSS选择器，property代表CSS特性，value代表特性的值。 3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera 4. Q代表Quirks Mode，S代表Standards Mode。 5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。 1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit 特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS 语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】：「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取

CSS_2.1手册中英文对照版

CSS2.0用户手册中英文对照版 ——该手册基于CSS 2.1规范 为了更好的了解网页浏览器是如何通过CSS显示页面，请查阅【盒模型】这篇文章。当中有“注：”的是翻译者做的注释。 必须知道的清单 1.margin 2.padding 3.border 4.background-color 5.color 6.font-family 7.font-size 8.float 完整列表 1.azimuth 使得用户能感知一个声音的特定水平方向（注：有可能和elevation结合使用，为视力障碍的人准备的）。 2.background 设定background-color, background-image, background-repeat, background-attachment 和background-position的缩写。 a)background-attachment 设置在浏览器窗口中的背景图片是滚动还是固定的 b)background-color 设置一个元素的背景色 c)background-image 设置一个元素的背景图片 d)background-position 设置背景图片初始位置 e)background-repeat 设置背景图片是否重复，以及怎样重复 3.border 设置border-width, border-style 和所有四个边框的border-color的缩写。 a)border-bottom 设置border-bottom-width, border-bottom-style 和 border-bottom-color的缩写。 i.border-bottom-color 设置元素下边框的颜色 ii.border-bottom-style 设置元素下边框的线条样式 iii.border-bottom-width 设置元素下边框的宽度 b)border-collapse 设置表格单元格是拥有各自的边框，还是共用一个边框 c)border-color 设置元素四个边框的颜色

css样式大全(整理版)

css样式大全(整理版） 字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值

CSS浏览器兼容性的各种代码解决方案

CSS浏览器兼容性的各种代码解决方案 https://www.sodocs.net/doc/9b16038742.html,/webds/blog/item/0fc34990dbef5a8ba877a4d1.html 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。 一般情况下，我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器，下面是用的较频繁的CSS Hack技巧： 用的最广莫过于!important了，它可以针对IE（IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异，我都会使 用!important。 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >body select {…} 这句与上一句的作用相同。 5、仅IE6不识别，屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 6、仅IE6与IE5不识别，屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽 IE5.5 7、仅IE5不识别，屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} }

CSS样式(规则)定义对话框中英文对照

C S S样式(规则)定义对 话框中英文对照 -CAL-FENGHAI-(2020YEAR-YICAI)_JINGBIAN

CSS样式（规则）定义对话框中英文对照 一、【类型】 1、font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 值描述 normal默认值。浏览器会显示一个标准的字体。 small-caps浏览器会显示小型大写字母的字体。 inherit规定应该从父元素继承 font-variant 属性的值。

2、text-transform 设置文本的大小写，只对英文字母有效。 值描述 none 无转换发生 capitalize 将每个单词的第一个字母转换成大写，其余无转换发生uppercase 转换成大写 lowercase 转换成小写 3、text-decoration 属性对文本进行修饰。 值描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 二、【背景】

1、background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 值描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。 三、【区块】

最全整理浏览器兼容性问题与解决方案样本

常用浏览器兼容性问题与解决方案所谓浏览器兼容性问题，是指由于不同浏览器对同一段代码有不同解析，导致页面显示效果不统一状况。在大多数状况下，咱们需求是，无论顾客用什么浏览器来查看咱们网站或者登陆咱们系统，都应当是统一显示效果。因此浏览器兼容性问题是前端开发人员经常会遇到和必要要解决问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精准按照设计图开发前端开发人员，可以说是精准到1px，她们很容易就会发现设计图局限性，并且在很少状况下会遇到浏览器兼容性问题，而这些问题往往都死浏览器bug，并且她们制作页面后期易维护，代码重用问题少，可以说是比较牢固放心代码。 第二类是基本按照设计图来开发前端开发人员，诸多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果实现也是重复调试得到，详细为什么浮现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这样写还不知因此然。此类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一种浏览器。改来改去也毫无头绪。其实她们遇到兼容性问题大某些不应当归咎于浏览器，而是她们技术自身了。 文章重要针对是第一类，严谨型开发人员，因而这里重要从浏览器解析差别角度来分析兼容性问题。 浏览器兼容问题一：不同浏览器标签默认外补丁和内补丁不同 问题症状：随便写几种标签，不加样式控制状况下，各自margin 和padding差别较大。 遇到频率:100% 解决方案：CSS里*

备注：这个是最常用也是最易解决一种浏览器兼容性问题，几乎所有CSS文献开头都会用通配符*来设立各个标签内外补丁是0。 浏览器兼容问题二：块属性标签float后，又有横行margin状况下，在IE6显示margin比设立大 问题症状:常用症状是IE6中背面一块被顶到下一行 遇到频率：90%（稍微复杂点页面都会遇到，float布局最常用浏览器兼容问题）解决方案：在float标签样式控制中加入display:inline;将其转化为行内属性 备注：咱们最惯用就是div+CSS布局了，而div就是一种典型块属性标签，横向布局时候咱们普通都是用div float实现，横向间距设立如果用margin实现，这就是一种必然会遇到兼容性问题。 浏览器兼容问题三：设立较小高度标签（普通不大于10px），在IE6，IE7，遨游中高度超过自己设立高度 问题症状：IE6、7和遨游里这个标签高度不受控制，超过自己设立高度 遇到频率：60% 解决方案：给超过高度标签设立overflow:hidden;或者设立行高line-height 不大于你设立高度。 备注：这种状况普通出当前咱们设立小圆角背景标签里。浮现这个问题因素是IE8之前浏览器都会给标签一种最小默认行高高度。虽然你标签是空，这个标签高度还是会达到默认行高。 浏览器兼容问题四：行内属性标签，设立display:block后采用float布局，又有横行margin状况，IE6间距bug 问题症状：IE6里间距比超过设立间距 遇到几率：20%

css样式表ID命名规则

一．文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 外套：wrap

主导航：mainnav 子导航：subnav 页脚：footer 整个页面：content 页眉：header 页脚：footer 商标：label 标题：title 主导航：mainbav（globalnav） 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 旗志：logo 标语：banner 菜单内容1：menu1content 菜单容量：menucontainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadcrumb(即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：Login 功能区：shop(如购物车，收银台) 当前的current[/quote] [b]网站常用中英文对照表[/b] [quote]网站导航Site Map 公司简介Profile or Company Profile or Company 公司设备Equipment Equipment 公司荣誉Glories Glories 企业文化Culture Culture 产品展示Product Product 资质认证Quality Certification 企业规模Scale Scale 营销网络Sales Network 组织机构organization organization 合作加盟Join In Cooperation 技术力量Technology Technology 经理致辞Manager`s oration 发展历程Development History 工程案例Engineering Projects 业务范围Business Scope

解决CSS 兼容性问题

解决CSS 兼容性问题 如果你经常使用CSS3 实现一些炫酷的效果，比如使用 transition 实现让一个div 慢慢变宽的动效，你一定会为了兼容各个高级浏览器而这样写你的CSS 代码： 1.#box { 2.width: 200 px; 3.height: 200 px; 4.-moz-transition: al l2s ease 0s; 5.-webkit-transition: all 2s ease 0s; 6.-o-transition: all 2s ease 0s; 7.} 8.#box:hover { 9.width: 800 px; 10.} 复制代码 在 Internet Explorer 10 上你也可以使用 CSS3 实现这个效果了，只需要为#box 添加一行代码：-ms-transition: all 2s ease 0s; 下面列举出几个典型的需要兼容 Internet Explorer 10 的CSS3 特性： 1. 3D 转换 Internet Explorer 10 和 Windows 8 中使用 JavaScript 的 Modern UI 风格的应用引入了对 CSS3 3D 转换的支持。Internet Explorer 9 增加了对 CSS3 2D 转换的支持，使用JavaScript 的 Modern UI 风格的应用也同样支持它们。转换支持包括变换、旋转以及2D 和3D 空间中的元素拉伸，这些转换无需插件。 为了实现CSS 转换，需要使用-ms-transform 属性定义一个或多个转换函数。例如，以下代码段是一个选择器，它将一个2D 偏移函数和一个3D 旋转函数同时应用于一个div 元素。 1.div { 2.... 3.-ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg); 4.} 复制代码

IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

小知识：什么是CSS hack？ 由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。 各浏览器CSS hack兼容表： 代码示例： #test{ color:red; /* 所有浏览器都支持*/ color:red !important;/* Firefox、IE7支持*/ _color:red; /* IE6支持*/ *color:red; /* IE6、IE7支持*/ *+color:red; /* IE7支持*/ color:red\9; /* IE6、IE7、IE8支持*/ color:red\0; /* IE8支持*/ } body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/ 整体测试代码示例： .test{ color:#000000; color:#0000FF\0; [color:#00FF00; *color:#FFFF00; _color:#FF0000; } 其他说明： 1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下： 2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个。 3、还有其他写法，比如： *html #test{}或者*+html #test{} 4、*+html 对IE7的hack 必须保证HTML顶部有如下声明： https://www.sodocs.net/doc/9b16038742.html,/TR/html4/loose.dtd 5、顺序：Firefox、IE8、IE7、IE6依次排列。

dreamweavercs5css规则面板中英对照及详解

定义文本样式、保存CSS规则后系统将行动打开“CSS规则定义”对话框。 [字体]：选择所需要的字体。 [大小]：定义字体大小。 [样式]：可选择字体的特殊样式，即“正常”、“斜体”或“偏斜体”等。 [行高]：设置文本所在行的高度。也可以输入一个确切的值并选择一种度量单位。[修饰]：在文本中添加下划线、上划线或删除线，或者使文本闪烁。 [粗细]：字体应用特定或相对的粗体量。 [变体]：设置文本的变体方式。 [大小写]：将所选内容中每个单词的首字母大写，或者将文本设置为全部大写或小写。[颜色]：设置文本颜色。

要定义背景样式可在“CSS规则定义”对话框中选择“背景”选项。 [背景颜色]：设置背景颜色。 [背景图像]：设置背景图像。 [重复]：确定是否以及如何重复背景图像。 （不重复）：只在元素开始处显示一次图像。 （重复）：在元素的后面水平和垂直平铺图像。 （横向重复）和（纵向重复）：分别显示图像的水平带区和垂直带区。图像将被剪辑以适合元素的边界。 [附件]：确定背景图像是固定在原始位置还是随内容一起滚动。 [水平位置]和[垂直位置]：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，位置则相对于“文档”窗口而不是元素。

3.区块样式的定义 使用“CSS规则定义”对话框中的“区块”类别可以定义标签和属性的间距、对齐等设置。[单词间距]：设置单词的间距。在下拉列表中选择“值”选项，然后输入数值可确定单词的间距，此时可在右侧的弹出式菜单中选择度量单位（例如像素、点等）。 [字母间距]：设置字母或字符间的间距。负值（例如-4）表示减小字符间距。字母间距设置可覆盖对齐的文本设置。 [垂直对齐]：指定垂直对齐方式。 [文本对齐]：设置元素中的文本对齐方式。 [文字缩进]：指定第一行文字缩进程度，并可在右侧选择数值单位。也可以使用负值创建凸出，但显示方式则取决于浏览器。 [空格]：确定如何处理元素中的空白。 （正常）：收缩空白。 （保留）：与文本被括在pre标签中一样（即保留所有空白，包括空格、制表符和回车等）。（不换行）：指定仅当遇到br标签时文本才换行。 [显示]：指定是否以及如何显示元素。“无”表示关闭应用此属性的元素的显示

Windows系统下各浏览器兼容性

Win dows系统下各浏览器常用CSS HAC汇总表 Hack ________________________ iJ/pe "-Hitml sei ec tori 1 *html selector 1 _prop erty :value 1 -property: valued 1 html* Beiector| 1 "property； value 1 property: valued 1 selector, c-moz-^ny-linkG -. 2 selector^ xz-moz-any-link^ < moz-document y fl-prefix(){ (2) htrnl>/=t*/body selector, x:-moz-^ any-link htrril^^^body SQkctDQ K:~moz' ? any-link, x:def3ult{+H：} 娄 二空屛头的.H舉険特百扩辰務式…..…2 ^irimdid seitan drid (-widtjkie min-dE vice-pixekratio:0)电… U；webkit开头的畑bkit測览器持有扩展样戒2 dnwbiw ail and ('webkit-miri'device-| pixal-ratio; 10000)* not all and 2 (-webkit- min-device-pixel-ratio: Ch Sa Op 1E6IE7iEd...— FF 1. 此汇总表中测试浏览器的版本为： 微软系统自带：IE6、IE7、IE8 火狐：Firefox 3.6.6 Safari : Safari 5.0 谷歌浏览器：Chrome 6.0.458.1 dev Opera 浏览器：Opera 10.60 2. 其中，多数CSS hack 是在selector{property:value;} 基础上更改的。 selector代表CSS选择器，property 代表CSS特性，value代表特性的值。 3. FF 代表Firefox ，Ch 代表Chorme ，Sa 代表Safari ，Op 代表Opera 4. Q 代表Quirks Mode ，S 代表Standards Mode 。 5. Hack Type 列的数字，指的是上面CSS hack的实现方式中的列表号。 1是指利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit 特有的扩展样式实现的hack。