提高CSS对浏览器的兼容性!不是看你代码有多强,是看你对问题的态度

简介:

对于页面的CSS样式,我们开发人员一般只会写一种方式,但一方式很难去适应所有浏览器,或者同一浏览器的各种版本,但如果你要设计一个完美的系统,又必须要去

考虑这个问题,下面是我对CSS样式设计的一个想法:

1 将公有部分,没有兼容的部分放在一个CSS文件里

2 将各个浏览器的个性CSS代码(有兼容性的代码)分别放在自己的文件中

3 通过CSS的IF来进行动态的选择

看代码:

 1  <link href="site.css" rel="stylesheet" type="text/css" /><!--公有通用样式CSS文件-->
 2 <!--[if gte IE 9]>
 3 <link href="ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
 4 <![endif]-->
 5 <!--[if IE 8]>
 6 <link href="ie8.css" media="screen, projection" rel="stylesheet" type="text/css" />
 7 <![endif]-->
 8 <!--[if lte IE 7]>
 9 <link href="ie7.css" media="screen, projection" rel="stylesheet" type="text/css" />
10 <![endif]-->

我们可以看到,它对IE9,IE8和IE7进行了过滤,如果你用IE8,那么页面就加载IE8的CSS样式。

页面HTML代码不用修改,各种版本的CSS只用一个HTML主体

 1 <div class="group" id="content">
 2                 <div class="zone zone-content">
 3 <form method="post" action="/Admin/ContentTypes/EditPart/zzl">    <fieldset>
 4         <label for="Name">名称</label>
 5         
 6         <input type="text" value="zzl" name="Name" id="Name" disabled="disabled" class="textMedium">
 7         <input type="hidden" value="zzl" name="Name" id="Name">
 8     </fieldset>
 9     <div class="manage-part">
10         <div class="settings">
11 
12 <fieldset>
13     <input type="checkbox" value="true" name="ContentPartSettings.Attachable" id="ContentPartSettings_Attachable" class="check-box" checked="checked"><input type="hidden" value="false" name="ContentPartSettings.Attachable">
14     <label class="forcheckbox" for="ContentPartSettings_Attachable">Attachable</label>
15     <span class="hint">Check to allow this part to be attached to other content types.</span> 
16     
17 </fieldset>        </div>
18         <h2>字段</h2>
19         <div class="manage add-to-type"><a href="/Admin/ContentTypes/AddFieldTo/zzl" class="button">新增</a></div>
20         
21     </div>
22     <fieldset class="action">
23         <button value="Save" name="submit.Save" type="submit" class="primaryAction">保存</button>
24         <button itemprop="RemoveUrl" value="Delete" name="submit.Delete" type="submit" class="primaryAction">删除</button>
25     </fieldset>
26  </form>
27 </div>
28             </div>

怎么样,这种方式不错吧,页面清晰,逻辑清晰,代码清晰,CSS也面向对象了!呵呵。

本文转自博客园张占岭(仓储大叔)的博客,原文链接:提高CSS对浏览器的兼容性!不是看你代码有多强,是看你对问题的态度,如需转载请自行联系原博主。

目录
相关文章
|
2月前
如何在不同的浏览器环境中确保时间戳转换的兼容性?
通过以上这些措施,可以在不同的浏览器环境中提高时间戳转换的兼容性,确保应用能够在各种浏览器中稳定运行,为用户提供良好的体验。
|
4月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
3月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
119 58
|
3月前
|
前端开发
用 CSS 实现兼容性渐变背景效果
【10月更文挑战第17天】
97 43
|
2月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
38 6
|
2月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
26 2
|
2月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
134 6
|
3月前
|
Web App开发 前端开发 JavaScript
|
5月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
64 1
|
5月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)

热门文章

最新文章