网页的兼容性解决办法

╰半夏微凉° 2022-06-08 09:11 278阅读 0赞

## HTML页面 ##

## HTML Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用？ ##

>        **这是一个，文档兼容模式的定义。  
> Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染**  
>        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
> **使用以下代码强制 IE 使用 Chrome Frame 渲染**  
>        <meta http-equiv="X-UA-Compatible" content="chrome=1">  
> **提示 IE 用户安装 Google Frame  
>          Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。  
>        <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>  
> 最佳的兼容模式方案，结合考虑以上两种：**
> 
>           <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

详细介绍可以打开这个链接：[html的meta总结，html标签中meta属性使用介绍][html_meta_html_meta]

## Viewport 基础 ##

> **一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：**
> 
> **<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>**
> 
> **width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。**
> 
> **height：和 width 相对应，指定高度。**
> 
> **initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。**
> 
> **maximum-scale：允许用户缩放到的最大比例。**
> 
> **minimum-scale：允许用户缩放到的最小比例。**
> 
> **user-scalable：用户是否可以手动缩放**

## <noscript>标签 ##

> noscript 元素用来定义在脚本未被执行时的替代内容（文本）。  
> 此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。  
> 提示和注释：  
> 注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。  
> 注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！  
>

## className ##

> className 属性设置或返回元素的 class 属性。

> 例子：
> 
>     <html>
>     <body id="myid" class="mystyle">
>     
>     <script type="text/javascript">
>     x=document.getElementsByTagName('body')[0];
>     document.write("Body CSS class: " + x.className);
>     document.write("<br />");
>     document.write("An alternate way: ");
>     document.write(document.getElementById('myid').className);
>     </script>
>     
>     </body>
>     </html>
> 
> 输出：
> 
>     Body CSS class: mystyle
>     An alternate way: mystyle
> 
> ##  ##
> 
> ## DIV CSS命名规则CSS命名大全内容篇。 ##

> **     一、命名规则说明：**
> 
>  *  所有的命名最好都小写
>  *  属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
>  *  每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
>  *  空元素要有结束的tag或于开始的tag后加上"/"
>  *  表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
>  *  <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
>  *  给每一个表格和表单加上一个唯一的、结构标记id
>  *  给图片加上alt标签
>  *  尽量使用英文命名原则
>  *  尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名：  -   TOP

>  *  外套 wrap ------------------用于最外层
>  *  头部 header ----------------用于头部
>  *  主要内容 main ------------用于主体内容（中部）
>  *  左侧 main-left -------------左侧布局
>  *  右侧 main-right -----------右侧布局
>  *  导航条 nav -----------------网页菜单导航条
>  *  内容 content ---------------用于网页中部主体
>  *  底部 footer -----------------用于底部
> 
> 详细命名规则：[DIV+CSS规范命名][DIV_CSS]

# CSS属性设置 #

## overflow 属性 ##

## 定义和用法 ##

overflow 属性规定当内容溢出元素框时发生的事情。

### 说明 ###

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

## 可能的值 ##

> **浏览器支持**
> 
> **所有主流浏览器都支持 overflow 属性。**
> 
> **注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。**

## text-decoration 属性 ##

> ##  ##

## 定义和用法 ##

text-decoration 属性规定添加到文本的修饰。

注释：修饰的颜色由 "color" 属性设置。

### 说明 ###

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

## 可能的值 ##

> ## 浏览器支持： ##
> 
> 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所有主流浏览器都支持 text-decoration 属性。
> 
> 注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。

## float属性 ##

## 定义和用法 ##

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

## 可能的值 ##

如果在一个DIV中，定义两个DIV都向左或者向右，并且设置好这是三个DIV的长宽，这两个DIV会不会重叠，会按顺序左浮或者右浮。

## vertical-align ##

**定义和用法**  
     vertical-align 属性设置元素的垂直对齐方式。  
**说明**  
     该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

## 可能的值 ##

<table style="font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> baseline</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 默认。元素放置在父元素的基线上。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> sub</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 垂直对齐文本的下标。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> super</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 垂直对齐文本的上标</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> top</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 把元素的顶端与行中最高元素的顶端对齐</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> text-top</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 把元素的顶端与父元素字体的顶端对齐</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> middle</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 把此元素放置在父元素的中部。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> bottom</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 把元素的顶端与行中最低的元素的顶端对齐。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> text-bottom</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 把元素的底端与父元素字体的底端对齐。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> length</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> %</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承 vertical-align 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

## outline ##

## 定义和用法 ##

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

*  outline-color
 *  outline-style
 *  outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid \#ff0000; 也是允许的。

<table style="font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248); color:rgb(0,0,153); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:181px"> 默认值：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; width:584px"> invert none medium</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 继承性：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> no</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 版本：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> CSS2</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> JavaScript 语法：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">object</span>.style.outline="#0000FF dotted thin"</td> 
  </tr> 
 </tbody> 
</table>

## 可能的值 ##

<table style="color:rgb(0,0,153); font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; background-color:rgb(253,252,248); font-size:14px; margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">outline-color</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定边框的颜色。参阅：<a href="http://www.w3school.com.cn/cssref/pr_outline-color.asp" title="CSS outline-color 属性" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">outline-color</a>&nbsp;中可能的值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">outline-style</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定边框的样式。参阅：<a href="http://www.w3school.com.cn/cssref/pr_outline-style.asp" title="CSS outline-style 属性" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">outline-style</a>&nbsp;中可能的值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">outline-width</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定边框的宽度。参阅：<a href="http://www.w3school.com.cn/cssref/pr_outline-width.asp" title="CSS outline-width 属性" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">outline-width</a>&nbsp;中可能的值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承 outline 属性的设置。</td> 
  </tr> 
 </tbody> 
</table>

## outline-color可能的值: ##

## outline-style可能的值: ##

<table style="color:rgb(0,0,0); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px; font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> none</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 默认。定义无轮廓。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> dotted</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义点状的轮廓。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> dashed</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义虚线轮廓。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> solid</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义实线轮廓。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> double</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义双线轮廓。双线的宽度等同于 outline-width 的值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> groove</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> ridge</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inset</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义 3D 凹边轮廓。此效果取决于 outline-color 值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> outset</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 定义 3D 凸边轮廓。此效果取决于 outline-color 值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承轮廓样式的设置。</td> 
  </tr> 
 </tbody> 
</table>

## outline-width可能的值: ##

## appearance ##

## 定义和用法 ##

appearance 属性允许您使元素看上去像标准的用户界面元素。

<table style="font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248); color:rgb(0,0,153); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:181px"> 默认值：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; width:584px"> normal</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 继承性：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> no</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 版本：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> CSS3</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> JavaScript 语法：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">object</span>.style.appearance="button"</td> 
  </tr> 
 </tbody> 
</table>

## 语法 ##

<table style="color:rgb(0,0,153); font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:180px"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> normal</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为常规元素。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> icon</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为图标（小图片）。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> window</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为视口。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> button</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为按钮。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> menu</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为一套供用户选择的选项。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> field</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 将元素呈现为输入字段。</td> 
  </tr> 
 </tbody> 
</table>

\-webkit\-appearance: none,就可以去除浏览器默认样式

## text-overflow ##

## 定义和用法 ##

text-overflow 属性规定当文本溢出包含元素时发生的事情。

## 语法 ##

text-overflow: clip|ellipsis|string;

<table style="color:rgb(0,0,153); font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248); margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:180px"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:42px"> 测试</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> clip</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 修剪文本。</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-overflow" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">测试</a></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> ellipsis</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 显示省略符号来代表被修剪的文本。</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-overflow&amp;p=2" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">测试</a></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">string</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 使用给定的字符串来代表被修剪的文本。</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

>         text-overflow没有none这一属性，然后它是要跟white-space:nowrap; 一起使用的，你只要把这个代码删了  或者设置为 white-space:normal，然后text-overflow就没用了 就不会出现...了

## important ##

> **  用法：**
> 
>                  Selector\{sRule!important;\}  
>

> ## 说明： ##
> 
> **提升指定样式规则的应用优先权。**
> 
>  *  IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：
>     
>     **示例代码：**
>     
>     >     div{color:#f00!important;color:#000;}
>     
>     在上述代码中，IE6及以下浏览器div的文本颜色为\#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为\#f00
>  *  IE6及以下浏览器要使!important生效，可用以下代码：
>     
>     **示例代码：**
>     
>     >     div{color:#f00!important;}
>     >     div{color:#000;}
>     
>     在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为\#f00
> 
>   
>

[html_meta_html_meta]: http://www.haorooms.com/post/html_meta_ds
[DIV_CSS]: http://www.divcss5.com/jiqiao/j4.shtml