【技巧类】

1、对一些标签统一规范。

2、padding，marign，height，width

写好标准头

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

clear:both;

 .clearfix:after {

    content: ".";

    display: block;

    height:;

    clear: both;

7    visibility: hidden;

 }

【兼容方法类】

1、背景、图片类

>> background显示问题
全部注意补齐 width，height 属性
>>背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

2、min-height最小高度的实现（兼容IE6、IE7、FF）

作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。

 #id {

   background:#ccc;

   min-height:100px;

   height:auto !important;

   height:100px;

   overflow:visible;

 }

3、跨浏览器的CSS透明度

 .transparent {

    opacity: 0.7;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    filter: alpha(opacity=70);

    -moz-opacity: 0.7;

    -khtml-opacity: 0.7;

 }

4、文字阴影、box阴影（CSS3）

 .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

 .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

5、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片

iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
【1】去掉背景色：filter:Chroma(Color=white);
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片：
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor="transparent" style='background:transparent'>

6、怎么样才能让层显示在FLASH之上呢？

解决的办法是给FLASH设置透明:

 <a href="http://www.chinaz.com/">:</a>

 <pre lang="html" line="1">

 <param name="wmode" value="transparent" />

7、怎样使一个div层居中于浏览器中？

 <style type="text/css">

 <!--

 div {

    position:absolute;

    top:50%;

    left:50%;

    margin:-100px 0 0 -100px;

    width:200px;

    height:200px;

    border:1px solid red;

 }

 -->

 </style>

8、文字与表单对齐方法？

设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:

 body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

9、optgroup标签的用法？

optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：

 <select id="selectId">

     <optgroup label="GROUP ONE">

        <option value="1">one select</option>

        <option value="2">two select</option>

     </optgroup>

     <optgroup label="GROUP TWO">

        <option value="3">three select</option>

        <option value="4">four select</option>

     </optgroup>

 </select>

效果图：

10、文字与图片垂直居中对齐方法？

为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};

例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中。

11、网页设计中的默认字体

 font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

12、浏览器兼容——常用的css hack

（1）.title{ height:200px;*height:200px;_height:200px; }

（2）.title{ height:200px;*height:200px !important;*height:200px; }

（3）.title{ height:200px; }
         *html.title{ height:200px;}
         *+html.title{ height:200px;}

web前端兼容性整理+完善的更多相关文章

  1. Web前端兼容性指南

    一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...

  2. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  3. 手机移动端web前端常见问题整理

    移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...

  4. web前端笔记整理，从入门到上天，周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  5. web前端素材整理汇总

    最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquer ...

  6. web前端优化整理（转）

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

  7. Web前端（整理不好，自己未学）

    1.公司招聘信息 (1)小公司 (2)腾讯 ①社会招聘 ②校园招聘 (3)百度 ①社会招聘 ②实习 ③校园招聘 2.岗位要求 开发经验,良好的编程习惯,学习能力,至少二个项目开发设计,具备需求功能模块 ...

  8. web前端问题整理

    1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera (Q2)内核:Trident,Gecko,Prest ...

  9. web前端 兼容性问题

    1:position属性使用过多或使用位置不恰当引起滚动时页面错乱 浏览器环境:ie7 position:relative; 网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出 ...

随机推荐

  1. E - 稳定排序（结构体）

    大家都知道,快速排序是不稳定的排序方法. 如果对于数组中出现的任意a[i],a[j](i<j),其中a[i]==a[j],在进行排序以后a[i]一定出现在a[j]之前,则认为该排序是稳定的. 某 ...

  2. loj#6040. 「雅礼集训 2017 Day5」矩阵（线性代数+递推）

    题面 传送门 题解 我的线代学得跟屎一样看题解跟看天书一样所以不要指望这题我会写题解 这里 //minamoto #include<bits/stdc++.h> #define R reg ...

  3. 4、OpenCV Python 像素运算

    __author__ = "WSX" import cv2 as cv import numpy as np #前提需要运算的图像大小和类型完全相同 #算术运算 加减乘除 #逻辑运 ...

  4. 选课 ( dp 树形dp 动态规划 树规)

    和某篇随笔重了?!!?!?!?!?!?不管了留着吧 题目: 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之 ...

  5. jq 使用手册

    翻译整理:Young.J官方网站:http://jquery.com jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是 ...

  6. linux上传与下载

    首先必须安装xshell这个工具 使用xshell来操作服务非常方便,传文件也比较方便.就是使用rz,sz首先,服务器要安装了rz,szyum install lrzsz当然你的本地windows主机 ...

  7. LUNA16数据集（二）肺结节可视化

    在检测到肺结节后,还需要可视化,这样才能为诊断服务. 我使用的项目地址为:https://github.com/wentaozhu/DeepLung 项目基于论文:DeepLung: Deep 3D ...

  8. VisualSVN的安装使用

    1.什么是VisualSVN VisualSVN Server是集成了Subversion和Apache的一种版本管理工具,它简化了手工配置Subversion的繁琐步骤,安装的时候SVN Serve ...

  9. composer.json 配置设置

    配置文件的值为 key:val 必须双引号包裹 一.配置文件 名字 name包名称由用户名名称和仓库名称组成包版本限制来请求Monolog软件包 1.0.*.这意味着1.0开发分支中的任何版本,或大于 ...

  10. liunx 内置mail 发送邮件

    邮件配置文件/etc/mail.rc [root@ ~]# vim /etc/mail.rc #添加.修改如下内容 .com .com .com set smtp-auth-password=xxx ...