我的编程空间,编程开发者的网络收藏夹
学习永远不晚

分析CSS Bug、CSS Hack和Filter

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

分析CSS Bug、CSS Hack和Filter

本篇内容主要讲解“分析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”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

分析CSS Bug、CSS Hack和Filter

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

下载Word文档

猜你喜欢

CSS HACK在IE6/IE7/IE8/IE9/FF中的示例分析

小编给大家分享一下CSS HACK在IE6/IE7/IE8/IE9/FF中的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HACK原理:不同浏览器对各中字
2023-06-08

CSS 模糊属性详解:filter 和 backdrop-filter

导语:在设计网页时,我们常常需要一些特效来增加页面的视觉吸引力。而模糊效果是其中一种常见的特效之一。CSS 提供了两种模糊属性:filter 和 backdrop-filter,它们分别用于对元素内容以及背景内容进行模糊处理。本文将详细介绍
2023-10-21

CSS 视觉属性解析:box-shadow,text-shadow 和 filter

引言:在网页设计和开发中,使用CSS可以为元素添加各种视觉效果。本文将重点介绍CSS中的box-shadow,text-shadow和filter这三个重要属性,包括其使用方法和效果展示。下面我们分别详细解析这三个属性。一、box-shad
2023-10-21

CSS 毛玻璃属性优化技巧:filter 和 backdrop-filter

在现代网页设计中,毛玻璃效果(Blur)被广泛应用于一些界面元素的背景或者图片上,以提供一种模糊、柔和的视觉效果。过去,实现毛玻璃效果的方法主要是通过使用图片处理软件对图片进行模糊处理,然后将模糊的图片作为背景使用。然而,这种方法需要额外的
2023-10-21

CSS 过滤属性指南:filter 和 grayscale

引言:CSS中的过滤属性(filter)可以为网页添加各种特效和效果,使页面更加丰富和吸引人。其中,grayscale(灰度)是一个常用的过滤效果,可以将图像转化为黑白色调。在本文中,我们将介绍filter属性的使用方法和代码示例,特别是针
2023-10-21

IE6有哪些常见CSS解析Bug

这篇文章主要讲解了“IE6有哪些常见CSS解析Bug”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“IE6有哪些常见CSS解析Bug”吧! 1.默认高度(IE6) 描述:在IE6
2023-06-05

css中filter属性和backdrop-filter对比有什么区别

这篇文章主要为大家展示了css中filter属性和backdrop-filter对比有什么区别,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css中filter属性和backdrop-filter
2023-06-08

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录