广告
返回顶部
首页 > 资讯 > 前端开发 > html >分析CSS Bug、CSS Hack和Filter
  • 273
分享到

分析CSS Bug、CSS Hack和Filter

filtercss 2022-10-19 13:10:38 273人浏览 薄情痞子
摘要

本篇内容主要讲解“分析CSS Bug、CSS Hack和Filter”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析CSS Bug、CSS Hack和Filt

本篇内容主要讲解“分析CSS Bug、CSS Hack和Filter”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析CSS Bug、CSS Hack和Filter”吧!

1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

2)CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

3)Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

*使用Hack带来的一些副作用

降低了CSS代码的可读性,增加了代码的负担。

*设计CSS Hack和 Filter通常有两种方法
1)一种是利用浏览器自身的Bug,来隐藏或显示样式或声明;
2)另一种是利用浏览器对CSS支持的不完善,如对某些规则或语法还没有形成支持,来隐藏或显示样式。

IE6常见CSS解析Bug及hack

1)图片间隙

A)在元素中直接插入图片时,图片下方会产生约3像素的间隙(该bug出现在IE6及更低版本中)

hack1:将<img>转为块状元素,给<img>添加声明:display:block;

hack2:将img设置vertical-align:top/middle/bottom;只要不为baseline

2) 双倍浮向(双倍边距)

描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界加倍显示。

hack:给浮动元素添加声明:display:inline;

3)默认高度(IE6)

描述:在IE6及以下版本中,部分块元素拥有默认高度(低于16px高度)

hack1:给元素添加声明:font-size:0;

hack2:给元素添加声明:overflow:hidden;

4)百分比bug

描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。

hack:给右面的浮动元素添加声明:clear:right;     意思:清除右浮动。 

5)表单元素高度及对齐方式不一致(IE,MOZ,C,O,S)

描述:表单元素行高对齐方式不一致

hack:给表单元素添加声明:float:left;或vertical-align:top;

2)表单元素中按钮的解析是按怪异盒模型解析的。

3)直接去掉表单控件的边框时用border:0;border:none;不能兼容ie7以下浏览器。

*透明写法

1.opacity:0~1;IE8以上的浏览器

2.filter:alpha(opacity=1~100);     IE9及IE9以下的浏览器

6)列表阶梯BUG(IE6及更低版本的浏览器中)

bug1:在给的子元素中使用了Float:left;父元素中没有设置浮动属性,li阶梯状效果。

hack:给父元素设置浮动便能解决此问题

bug2:当给LI里的A转成块元素,并设置了固定高度时,且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。

hack:给a也设置左浮动便可解决。

8)鼠标指针bug

描述:cursor属性的hand属性值只有IE浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;

扩展内容:

鼠标指针

cursor:crosshair(十字架)

pointer(手形)

move(移动)

e-resize(左右方向)

ne-resize(向右及向上移动)

nw-resize(向上及向左移动)

n-resize(向上移动)

se-resize(向下及向右)

sw-resize(向下及向左)

s-resize(向下移动)

w-resize(向左移动)

text(文本)

wait(等待状态)

help(帮助)

到此,相信大家对“分析CSS Bug、CSS Hack和Filter”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 分析CSS Bug、CSS Hack和Filter

本文链接: https://www.lsjlt.com/news/85529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分析CSS Bug、CSS Hack和Filter
    本篇内容主要讲解“分析CSS Bug、CSS Hack和Filter”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析CSS Bug、CSS Hack和Filt...
    99+
    2022-10-19
    filter css
  • 常见css hack实例分析
    这篇“常见css hack实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“常见css...
    99+
    2022-10-19
    hack css
  • CSS Hack兼容代码的示例分析
    小编给大家分享一下CSS Hack兼容代码的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 经常使用CSS HACK标...
    99+
    2022-10-19
    css hack
  • 兼容性CSS HACK代码的示例分析
    这篇文章主要介绍兼容性CSS HACK代码的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1.区别IE与非IE涉猎器CSS HACK代码  #CSS5{...
    99+
    2022-10-19
    css hack
  • CSS浏览器兼容性Hack的示例分析
    这篇文章给大家分享的是有关CSS浏览器兼容性Hack的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。IE6/7实现display:inline-block有两种方法,第一...
    99+
    2022-10-19
    css hack
  • CSS filter与前端滤镜实例分析
    本篇内容介绍了“CSS filter与前端滤镜实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  ...
    99+
    2022-10-19
    css filter
  • CSS HACK在IE6/IE7/IE8/IE9/FF中的示例分析
    小编给大家分享一下CSS HACK在IE6/IE7/IE8/IE9/FF中的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HACK原理:不同浏览器对各中字...
    99+
    2023-06-08
  • IE CSS Bug系列中高度额外扩展的Bug分析
    本篇内容主要讲解“IE CSS Bug系列中高度额外扩展的Bug分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“IE CSS Bug系列中高度额外扩展的Bug...
    99+
    2022-10-19
    ie css
  • IE6、IE7、IE8、Firefox兼容性CSS HACK问题实例分析
    这篇“IE6、IE7、IE8、Firefox兼容性CSS HACK问题实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能...
    99+
    2022-10-19
    ie css hack
  • 如何解析针对IE6的CSS hack用法
    今天就跟大家聊聊有关如何解析针对IE6的CSS hack用法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。通过实例向大...
    99+
    2022-10-19
    css hack ie6
  • CSS 模糊属性详解:filter 和 backdrop-filter
    导语:在设计网页时,我们常常需要一些特效来增加页面的视觉吸引力。而模糊效果是其中一种常见的特效之一。CSS 提供了两种模糊属性:filter 和 backdrop-filter,它们分别用于对元素内容以及背景内容进行模糊处理。本文将详细介绍...
    99+
    2023-10-21
    filter 属性 CSS 模糊属性关键词:模糊
  • CSS Hack技术的原理和用法
    这篇文章主要介绍“CSS Hack技术的原理和用法”,在日常操作中,相信很多人在CSS Hack技术的原理和用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS Hack...
    99+
    2022-10-19
    css
  • CSS Hack的工作原理和用法
    本篇内容介绍了“CSS Hack的工作原理和用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!你对CSS ...
    99+
    2022-10-19
    css
  • IE6有哪些常见CSS解析Bug
    这篇文章主要讲解了“IE6有哪些常见CSS解析Bug”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“IE6有哪些常见CSS解析Bug”吧!    1.默认高度(IE6)&n...
    99+
    2023-06-05
  • CSS 视觉属性解析:box-shadow,text-shadow 和 filter
    引言:在网页设计和开发中,使用CSS可以为元素添加各种视觉效果。本文将重点介绍CSS中的box-shadow,text-shadow和filter这三个重要属性,包括其使用方法和效果展示。下面我们分别详细解析这三个属性。一、box-shad...
    99+
    2023-10-21
    CSS filter text-shadow box-shadow 视觉属性
  • CSS中hack和注释规范有哪些
    这篇文章给大家介绍CSS中hack和注释规范有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。CSS中hack和注释书写规范一.hack书写规范因为不同浏览器对W3C标准的支持不一样...
    99+
    2022-10-19
    css hack
  • DIV CSS HACK怎么和浏览器兼容
    本篇内容介绍了“DIV CSS HACK怎么和浏览器兼容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    css div hack
  • IE CSS Bug中链接图像透明部分不可点击分析
    这篇文章主要介绍“IE CSS Bug中链接图像透明部分不可点击分析”,在日常操作中,相信很多人在IE CSS Bug中链接图像透明部分不可点击分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
    ie css
  • IE CSS Bug中PNG图像与背景颜色错配分析
    这篇文章主要介绍“IE CSS Bug中PNG图像与背景颜色错配分析”,在日常操作中,相信很多人在IE CSS Bug中PNG图像与背景颜色错配分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
    ie css
  • CSS 毛玻璃属性优化技巧:filter 和 backdrop-filter
    在现代网页设计中,毛玻璃效果(Blur)被广泛应用于一些界面元素的背景或者图片上,以提供一种模糊、柔和的视觉效果。过去,实现毛玻璃效果的方法主要是通过使用图片处理软件对图片进行模糊处理,然后将模糊的图片作为背景使用。然而,这种方法需要额外的...
    99+
    2023-10-21
    CSS 毛玻璃 属性优化技巧
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作