网页的兼容性解决办法
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">
- 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标签
- 尽量使用英文命名原则
- 尽量不缩写，除非一看就明白的单词
- 外套 wrap ------------------用于最外层
- 头部 header ----------------用于头部
- 主要内容 main ------------用于主体内容（中部）
- 左侧 main-left -------------左侧布局
- 右侧 main-right -----------右侧布局
- 导航条 nav -----------------网页菜单导航条
- 内容 content ---------------用于网页中部主体
- 底部 footer -----------------用于底部
详细命名规则：DIV+CSS规范命名
CSS属性设置
- overflow 属性
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 默认值： | visible |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.overflow="scroll" |
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
浏览器支持所有主流浏览器都支持 overflow 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
- text-decoration 属性
定义和用法
text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 "color" 属性设置。
说明
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.textDecoration="overline" |
可能的值
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
浏览器支持：
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所有主流浏览器都支持 text-decoration 属性。
注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。
- float属性
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.cssFloat="left" |
可能的值
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
如果在一个DIV中，定义两个DIV都向左或者向右，并且设置好这是三个DIV的长宽，这两个DIV会不会重叠，会按顺序左浮或者右浮。
- vertical-align
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
| 默认值： | baseline |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.verticalAlign="bottom" |
可能的值
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
- outline
定义和用法
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
- outline-color
- outline-style
- outline-width
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
| 默认值： | invert none medium |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.outline="#0000FF dotted thin" |
可能的值
| 值 | 描述 |
|---|---|
| outline-color | 规定边框的颜色。参阅：outline-color 中可能的值。 |
| outline-style | 规定边框的样式。参阅：outline-style 中可能的值。 |
| outline-width | 规定边框的宽度。参阅：outline-width 中可能的值。 |
| inherit | 规定应该从父元素继承 outline 属性的设置。 |
outline-color可能的值:
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的轮廓颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。 |
| invert | 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 |
| inherit | 规定应该从父元素继承轮廓颜色的设置。 |
outline-style可能的值:
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| dotted | 定义点状的轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
| inherit | 规定应该从父元素继承轮廓样式的设置。 |
outline-width可能的值:
| 值 | 描述 |
|---|---|
| thin | 规定细轮廓。 |
| medium | 默认。规定中等的轮廓。 |
| thick | 规定粗的轮廓。 |
| length | 允许您规定轮廓粗细的值。 |
| inherit | 规定应该从父元素继承轮廓宽度的设置。 |
- appearance
定义和用法
appearance 属性允许您使元素看上去像标准的用户界面元素。
| 默认值： | normal |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.appearance="button" |
语法
appearance: normal|icon|window|button|menu|field;
| 值 | 描述 |
|---|---|
| normal | 将元素呈现为常规元素。 |
| icon | 将元素呈现为图标（小图片）。 |
| window | 将元素呈现为视口。 |
| button | 将元素呈现为按钮。 |
| menu | 将元素呈现为一套供用户选择的选项。 |
| field | 将元素呈现为输入字段。 |
- text-overflow
定义和用法
text-overflow 属性规定当文本溢出包含元素时发生的事情。
| 默认值： | clip |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.textOverflow="ellipsis" |
语法
text-overflow: clip|ellipsis|string;
| 值 | 描述 | 测试 |
|---|---|---|
| clip | 修剪文本。 | 测试 |
| ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
| string | 使用给定的字符串来代表被修剪的文本。 |
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
网页的兼容性解决办法相关推荐
- QQ能上网，网页不行总解决办法
一.网络设置的问题 这种原因比较多出现在需要手动指定IP.网关.DNS服务器联网方式下,及使用代理服务器上网的.仔细检查计算机的网络设置. 二.DNS服务器的问题 当IE无法浏览网页时,可先尝试用IP ...
- IE8新建选项卡提示网页错误的解决办法
打开IE,新建一个页面报错,很影响心情 解决办法: 1.打开注册表 cmd –> regedit 2.找到HKEY_CLASSES_ROOT\TypeLib\{EAB22AC0-30C1-11C ...
- edge浏览器打开多个网页卡顿解决办法
edge有时候打开了十几个页面就大量占据内存了,卡的不行,上网汇总了解决方法,具体参考以下两篇文章,一个是通过edge浏览器自身的设置修改,一个是关闭gpu相关的图形加速插件.按照以下两篇文章的方法基 ...
- 自建DNS服务器，客户端打开网页慢，解决办法
自建DNS服务器,客户端打开网页很慢,一直转圈圈很久才会打开网页 解决方法: 打开DNS服务器,右击-属性 转发器-编辑,添加一个外部DNS地址,如下 添加完成后,服务器重启即可.
- 网页报404解决办法
今天调试的时候报404错误了,这个时候我在后台requestMapping()映射的方法设置断点,该方法没有进去.如果你和我是一样的情况的话,试试以下办法: 1.仔细检查你的URL,每一个字母都和后台 ...
- 广讯通（OA）无法打开网页文件的解决办法
点击网页文件,弹出各种错误,点击弹出的"修复"出现如下图所示窗口,直接修复就好了.中途可能要安装JAVA,直接下一步就好了.
- android webview内容变大,Android中WebView加载的网页被放大的解决办法
在某些大分辨率下,我们用WebView加载的网页可能会出现被放大的现象,这显然不是我们想要的结果,我开始看WebSettings这个是否可以设置不缩放,webSettings.setBuiltInZo ...
- 安卓WebView无法显示百度地图网页版的解决办法
只需添加两个设置 [默认不开启]: WebSettings.setJavaScriptEnabled(true); // 允许JavaScript脚本运行 WebSettings.setDomStor ...
- 能上QQ，却不能浏览网页的解决办法
能上QQ,却不能浏览网页的解决办法 一.感染了病毒所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但老半天没响应.在任务管理器里查看进程,(进入方法,把鼠标放在任务栏上,按 ...
最新文章
- pandas使用rename函数自定义重命名dataframe指定索引标签（位置）的名称（customize rename index value or label）
- Project Explore 再现
- .net中存储过程的应用
- iphone11返回上一级手势怎么设置_苹果iphone12怎么关闭程序appp 怎么返回上一步
- python不会怎么办_怕你还不会Python函数，我特意为你整理了一篇博客
- 大字段 CLOB/BOLB与String互转
- 运筹优化（三）--线性规划之单纯形法
- 云原生网络性能优化：service mesh 篇
- Birth-Death process 生灭过程
- 基于Matlab的同态滤波彩色图像增强算法研究
- Zabbix学习笔记(三)---使用短信报警
- go语言 flag用法
- matlab实现lzw编码,LZW编码算法matlab实现
- 中国云计算产业的发展趋势和当今现状
- Linux关闭防火墙
- 2019spring exam 7-5 校庆
- 800行Python代码实现京东自动登录抢购商品，坐等付款就好了
- c#实现邮件发送功能
- 计算机互联网络板书,初中信息技术：计算机互联网络》教学设计
- 【三维目标检测】SSN（一）