div+css浏览器兼容之对css hack的理解_html/css_WEB-ITnose
写了这么久的div+css代码,我还真不知道这个hack是什么? 上网仔细查了一下。简单的说针对不同的浏览器写不同的 CSS code 的过程,就叫 CSS hack , 也叫写 CSS hack 。
Css hack 的原理: 由于不同的浏览器对 CSS 的支持及解析结果不一样,还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。
比如 IE6 能识别下划线 "_" 和星号 " * " , IE7 能识别星号 " * " ,但不能识别下划线 "_" ,而 firefox 两个都不能认识。等等
书写顺序,一般是将识别能力强的浏览器的 CSS 写在后面
浏览器优先级别 :FF
来看下面div+css浏览器兼容的例子:
#demo {width:100px;} /* 被 FIREFOX,IE6,IE7 执行 .*/
* html #demo {width:120px;} /* 会被 IE6 执行 , 之前的定义会被后来的覆盖 , 所以 #demo 的宽度在 IE6 就为 120px; */
*+html #demo {width:130px;} /* 会被 IE7 执行 */
所以最后 ,#demo 的宽度在三个浏览器的解释为 :
firefox:100px;
ie6:120px;
ie7:130px;
以上例子也可以用我的上一篇文章“div+css浏览器兼容一 中的方法来解决!在这里就不再举例了。”
div+css浏览器兼容技巧:
① 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
② 水平居中. margin: 0 auto;(当然不是万能)
③ 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
④ FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
⑤ ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
⑥ 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
⑦ 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
⑧ FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
注:针对firefox IE6 IE7的css样式
现在大部分都是用!important来hack,对于IE6和firefox测试可以正常显示,
但是IE7 !important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个 浏览器兼容:
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度为20,IE6下的高度为50,IE7下的高度为80。
给大家一点意见:能不用 CSS Hack还是不用的好。其实在设计网站的时候,如果能考虑到一些可能出现CSS bug的地方,是最好的,我设计网站的时候都尽量避免CSS bug.一般高手都不用hack.

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati
