关于CSS细节集合(二)_html/css_WEB-ITnose

一、IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确达到效果,解决办法:

.代码  

#show li.s1{ border:1px solid #ff9900; background:#454242;}   #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}  

 

二、为元素设置hasLayout

很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决,最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;前端UI分享

四、样式优先级

1,内联样式 [1.0.0.0]
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,元素标签,伪元素 选择器 [0.0.0.1]

立即学习“前端免费学习笔记(深入)”;

五、一个元素垂直居中的css写法

.代码  

#exm{       position:absolute;       left:50%;       top:50%;       z-index:1;       width:200px;           height:100px;       margin-left:-100px;       margin-top:-52px;   }  

 

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。前端UI分享

七、图片跟文字并排时, 要实现图片文字垂直居中:

将line-height:设置成图片的高度,或者图片父元素的高度. 再将图片的CSS设置vertical-align:middle;

八、li 元素中包含 a img 元素的时候,IE6下出现空白

解决方法 一:

使 li 浮动,并设置 img 为块级元素

解决方法 二:

设置 ul 的 font-size:0;

解决方法 三:

设置 img 的 vertical-align: bottom;

解决方法 四:

设置 img 的 margin-bottom: -5px;

九、被点击访问过的超链接样式不在具有hover和active

解决方法:改变CSS属性的排列顺序: L-V-H-A

十、FF下连续长字段不能自动换行

解决方法:

.代码  

div{word-wrap:break-word;overflow:hidden;}    

十一、FF下父容器高度不能自适应

解决办法:清除子元素的浮动

十二、IE下图片下方产生空隙

解决办法:

定义img 为display:block,或vertical-align为top/bottom/middle/text-bottom 定义父容器的字体大小为零,font-size:0

十三、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法:

相邻的非浮动元素也设置浮动; 浮动元素相对IE6定义_margin-right:-3px;

十四、LI内容超长后以省略号显示

解决办法: white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

十五、文本不能垂直居中

解决办法:行高和容器高度相等line-height=height;

十六、文本输入框和相邻的文本不能对齐

解决办法:设置文本输入框vertical-align:middle;前端UI分享

十七、IE设置滚动条样式

解决办法:

.代码  

body{   scrollbar-face-color:#f6f6f6;   scrollbar-highlight-color:#fff;   scrollbar-shadow-color:#eeeeee;   scrollbar-3dlight-color:#eeeeee;   scrollbar-arrow-color:#000;   scrollbar-track-color:#fff;   scrollbar-darkshadow-color:#fff;   }  

 

十八、IE6无法定义高度为1px的容器

解决办法:

.代码  

div{   overflow:hidden;   zoom:0.8;   line-height:1px;   }  

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3092417.html

(0)
上一篇 2025年3月28日 13:57:38
下一篇 2025年3月28日 13:57:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何解决PHP中HTML解析的复杂问题?使用voku/simple_html_dom可以!

    可以通过以下地址学习 Composer:学习地址 在我的项目中,我需要从 html 页面中提取特定内容并进行操作。起初,我尝试使用正则表达式和手动解析,但这不仅耗时,而且容易出错。幸运的是,我找到了 voku/simple_html_dom…

    编程技术 2025年4月5日
    200
  • 使用Composer解决CSS前缀问题:padaliyajay/php-autoprefixer库的实践

    可以通过一下地址学习composer:学习地址 在前端开发中,处理不同浏览器的兼容性问题一直是开发者们的一大挑战。特别是当你需要为 css 属性添加前缀以确保在旧版浏览器中也能正常显示时,这个过程往往是繁琐且容易出错的。最近,在开发一个新项…

    编程技术 2025年4月5日
    300
  • 关于HTML5和CSS替换使用

    听到html5的都知道它的强大,如更多的描述性标记、较少依赖于插件的多媒体支持、跨文档消息通信、web sockets、客户端存储、更强大的表单、提升可访问性、先进的选择器、强大的视觉效果。费话不多说,细细说来 被废弃的标签和属性 废弃的标…

    编程技术 2025年4月4日
    100
  • 跨平台开发中的Java框架选择

    跨平台 java 应用程序开发的最佳框架选择取决于项目需求。原生开发框架 (swift、kotlin) 提供最佳性能,但需要针对每个平台单独编写代码。跨平台框架 (react native、flutter) 允许代码重用,但性能可能受限。选…

    2025年4月2日
    100
  • eclipse怎么改黑色主题

    要将 Eclipse 的主题更改为黑色,请按照以下步骤操作:1. 打开主题菜单;2. 选择黑色主题;3. 应用更改;4. 重启 Eclipse。使用第三方插件或自定义 CSS 可以进一步自定义主题。 如何修改 Eclipse 为黑色主题 要…

    2025年4月2日
    200
  • eclipse怎么安装emmet

    Emmet 的 Eclipse 安装分以下步骤进行:安装 Emmet 插件:转到菜单栏中的“帮助”>“市场”,搜索并安装“Emmet for Eclipse”。启用 Emmet:重新启动 Eclipse,转到“窗口”>“首选项”…

    2025年4月2日
    200
  • idea怎么刷新项目

    直接刷新项目方法:1. 单击“Reload”按钮(Ctrl + F5);2. 右键单击项目,选择“Reload All from Disk”。强制刷新项目:1. 单击“Invalidate Caches / Restart”按钮(Ctrl …

    2025年4月2日
    300
  • yii框架怎么引用css

    yii框架引用css的方法:1、内联样式,将CSS样式直接写在视图文件中的HTML元素上;2、内部样式表,在视图文件的head标签内使用style标签来定义CSS样式;3、外部样式表,创建一个独立的CSS文件,并在视图文件中使用link标签…

    2025年4月2日
    100
  • 深入探讨 Laravel 集合的 Where 方法

    Laravel 是一款流行的 PHP 开发框架,它提供了许多实用的功能和工具,其中集合(Collection)是 Laravel 中一个非常强大且常用的工具之一。在集合中,Where 方法是一个非常有用的方法,可以让我们根据指定条件过滤集合…

    2025年4月2日
    300
  • 解决Laravel项目中CSS文件无法加载的问题

    解决Laravel项目中CSS文件无法加载的问题,需要具体代码示例 在开发Laravel项目的过程中,有时候会遇到CSS文件无法加载的问题,这可能会导致页面样式混乱或者无法正常显示页面内容。这个问题通常是由于文件路径配置或者缓存导致的,接下…

    2025年4月2日
    200

发表回复

登录后才能评论