您的位置：首页 > 其它

[置顶] 网页的兼容性解决办法

2017-09-21 08:41 225 查看

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属性使用介绍

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 相对应，指定高度。

<
1d810
/span>

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

className

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

例子：

<html>
<body id="myid" class="mystyle">

<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Body CSS class: " + [code]x.className

);
document.write("<br />");
document.write("An alternate way: ");
document.write(

document.getElementById('myid').className

);
</script>

</body>
</html>[/code]

输出：

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规范命名

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	将元素呈现为输入字段。

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航