首页 > 网站 > WEB开发 > 正文

实际工作中遇到的一些css

2024-04-27 14:37:13
字体:
来源:转载
供稿:网友
实际工作中遇到的一些CSS

1、除去table默认的每个单元格带有的类似内边距的空白如设置了table和td的border后,是这个样子:,设置<table cellspacing="0" >后变成这个样子:

2、除去radio和checkbox四种的一圈类似内边距的空白像下面这样:,设置background: transparent;后变成这个样子:。里面的豆沙绿是由于电脑的设置,无法改变。

3、有时子元素float后,父元素的border显示不太正常。这个情况遇到过一次,父元素ul、子元素是li。像下面这样,部分border显示不支持:当li节点全部预先写在html里时,表现正常;在IE8中,li如果是页面加载后自动动态添加进去的话,则出现了border错位。而如果是通过单击事件添加的节点,则又表现正常了。我以为是不是在没有用户参与的事件(如页面加载事件)里添加事件就会出现border错位?.....尼玛最后在一点点排除js和html节点结构后发现是DOCTYPE的问题,把<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">改成<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">后在IE8里正常了,......啊,累死了。(后话:但是二者在IE6里都不正常。最终我是用display:inline-block;代替float后IE6里也正常了(

注: 修改inline元素的display属性为inline-block后,所有的浏览器都是支持的。修改block元素的display属性为inline-block后,IE6及以下的老版浏览器都是不支持的。可使用float:left; display:inline;代替display:inline-block;解决这种不兼容问题。))

4、节点(比如行内元素)标签之间的空格/换行导致的空白比如CSS这样:span,input{border:1px solid black;},HTML这样:

<body><span>1111</span><input type='text' value='222'><span>333</span> </body>

结果IE8这样:。把HTML改成这样:

<body><span>1111</span><input type='text' value='222'><span>333</span> </body>

结果IE8会变成这样:。(Chrome里行内元素有个默认的margin,需要margin:0;以后才会变成IE8里这样)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表