实际工作中遇到的一些css

时间:2021-08-09 21:24:41

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

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

3、有时子元素float后,父元素的border显示不太正常。这个情况遇到过一次,父元素ul、子元素是li。像下面这样,部分border显示不支持:实际工作中遇到的一些css实际工作中遇到的一些css当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这样:实际工作中遇到的一些css。把HTML改成这样:

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

结果IE8会变成这样:实际工作中遇到的一些css。(chrome里行内元素有个默认的margin,需要margin:0;以后才会变成IE8里这样)