css兼容性问题及一些常见问题汇总大全,赶快收藏!
yuyutoo 2025-03-28 23:09 2 浏览 0 评论
目前主流浏览器的兼容性做的都比较好了,本文主要针对IE6,7的不兼容问题进行解决。
1.有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。
解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定
2.在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。
3. 在IE6下元素的高度的小于19px的时候,会被当做19px来处理
解决办法:添加overflow:hidden;
4.在IE6下border:1px dotted #000;中,dotted不支持,会以虚线的方式的出现。
解决方法:切背景平铺
5.在所有浏览器中子元素的margin-top,margin-bottom值会传递给父级;
解决办法:
a:给父级都添加浮动(或者给子级添加浮动也能解决margin-top问题,但是margin左右值会出现双倍的值,也就是双边据bug问题,下面会讲);
b:给父级添加position:relative;(或position:absolute;但是会脱离文档流)
c:添加display:inline-block; 正常浏览器,可行,但是IE,7下,块元素不支持display:inline-block;
d: 给附件添加border属性,例如border:1px solid red; 正常浏览器可行,在IE6下必须再给父级添加zoom:1;
6.在IE6下,块元素有浮动和和横向的margin值 ,横向的margin值会被放大成两倍。
解决办法:添加display:inline;
7.在IE6,7下,li自身没浮动,但是li的内容有浮动,li下边就会产生一个间隙
解决办法:1.给li加浮动 2.给li加vertical-align:top;
注意:当IE6下最小高度问题,和 li的间隙问题共存的时候, 给li加浮动才能解决。
8.当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
解决方法:额,还没发现
9.在IE6下的文字溢出BUG。即:子元素的宽度和父级的宽度相差小于3px的时候,或者两个浮动元素中间有注释或者内嵌元素的时候,IE6下文字溢出
解决办法:用div把注释或者内嵌元素用div包起来。
10.当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失。
解决办法: 给定位元素外面包个div。
11.在IE6,7下,子元素有相对定位的话,父级的overflow包不住子元素。
解决办法: 给父级也加相对定位 position:relative;。
12.在IE6下绝对定位元素的父级宽高是奇数的时候,元素的right值和bottom值会有1px的偏差.
解决办法: 尽量用偶数,还没发现别的方法。
13.在IE6下,position:fixed; 是没有效果的。
解决方法:用js来控制吧。。。
14.在IE6,7下输入类型的表单控件上下各有1px的间隙。
解决办法:给input加浮动,或者是绝对定位。
15.在IE6,7下输入类型的表单控件加border:none;会发现border还在,
解决办法: 重置input的背景,如input{background:#fff;}; 或者使用border:0;或border:0 none;
16.在IE6,7下输入类型的表单控件输入文字的时候,其背景图片会跟着一块移动 。
解决办法: 把背景加给父级。
17. 更简洁的css清理浮动方式:
18. css强制换行与强制不换行:
/* 禁止换行 */ .nowrap{word-break:keep-all;white-space:nowrap;}
/* 强制换行 */ .break{word-break:break-all;}
19. 超链接样式的设置:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
格式化标签的默认样式;
20. 当一行固定宽度,且显示不下内容,则加省略号:
21. 浏览器兼容性,善用css hack
margin-bottom:40px; /*ff的属性*/
margin-bottom:140px\9; /* IE6/7/8的属性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的属性*/
_margin-bottom:450px; /*IE6/7的属性*/
以上这篇关于css兼容性问题及一些常见问题汇总就是小编分享给大家的全部内容了,希望能给大家一个参考。除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址,谢谢!
相关推荐
- YAML配置文件简介及使用(yaml 配置)
-
简介YAML是"YAMLAin'taMarkupLanguage"(YAML不是一种标记语言)的缩写。相比JSON格式的方便。...
- 教你如何解决最常见的58种网络故障排除方法
-
1.故障现象:网络适配器(网卡)设置与计算机资源有冲突。分析、排除:通过调整网卡资源中的IRQ和I/O值来避开与计算机其它资源的冲突。有些情况还需要通过设置主板的跳线来调整与其它资源的冲突。2.故障现...
- 一分钟带你了解服务器网卡(服务器网卡怎么用)
-
今天小编和大家聊一下服务器的网卡。什么是网卡?简单说网卡就是计算机与局域网互连的设备。计算机主要通过网卡接入网络。网卡又称为网络适配器或网络接口卡NIC(NetworkinterfaceCard)...
- linux文件之ssh配置文件的含义与作用
-
ssh远程登录命令是操作系统(包括linux和window系统)下常用的操作命令,可以帮助用户,远程登录服务器系统,查看,操作系统相关信息。linux系统对于ssh命令有专门保存其相关配置的目录和文件...
- Cilium 官方文档翻译 - IPAM(二)Kubernetes Host模式
-
KubernetesHostScopeciliumIPAM的kuberneteshost-scope模式通过选项ipam:kubernetes开启,将集群IP地址分配委托给每个独立的节点,并...
- 域名劫持跳转,域名劫持跳转的解决办法只需5步
-
简单来说,域名劫持就是把原本准备访问某网站的用户,在不知不觉中,劫持到仿冒的网站上,例如用户准备访问某家知名品牌的网上商店,黑客就可以通过域名劫持的手段,把其带到假的网上商店,同时收集用户的ID信息和...
- Linux 磁盘和文件系统管理(linux磁盘管理fdisk)
-
1检测并确认新硬盘...
- windows host文件怎么恢复?局域网访问全靠这些!
-
windowshost文件怎么恢复?windowshost文件是常用网址域名及其相应IP地址建立一个关联文件,通过这个host文件配置域名和IP的映射关系,以提高域名解析的速度,方便局域网用户使用...
- Nginx配置文件详解与优化建议(nginx 配置详解)
-
1、概述今天来详解一下Nginx的配置文件,以及给出一些配置建议,希望能对大家有所帮助。...
- Mac电脑hosts文件锁定,如何修改hosts文件权限
-
有时候我们需要修改hosts文件,但是网上很多教程都行不通,使用sudo命令也不行。其实有一个很简单的方法。打开终端命令行,使用如下命令即可:sudochflags-hvnoschg/etc/...
- windows电脑如何修改hosts文件?(windows 修改hosts文件)
-
先来简单说下电脑host的作用hosts文件的作用:hosts文件是一个用于储存计算机网络中各节点信息的计算机文件;作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中...
- Vigilante恶意软件行为怪异:修改Hosts文件以阻止受害者访问盗版网站
-
Sophos刚刚报道了一款名叫Vigilante的恶意软件,但其行为却让许多受害者感到不解。与其它专注于偷密码、搞破坏、或勒索赎金的恶意软件不同,Vigilante会通过修改Hosts文件...
- hosts文件无法修改几种现象和解决方法
-
第一种、hosts文件修改完不是直接保存而是弹出另存为窗口解决:1、右击hosts文件——属性——把“只读”前面勾去掉。第二种、打开hosts文件时提示“你没有权限打开该文件,请向文件的所有者或管理员...
- hosts文件位置在哪里,教你hosts文件位置在哪里
-
Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的I...
你 发表评论:
欢迎- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了,如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
其实模版网站在开发工作中很重要,推荐几个参考站给大家
-
推荐7个模板代码和其他游戏源码下载的网址
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)
-
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)