zoukankan      html  css  js  c++  java
  • 实际工作中遇到的一些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里这样)


     

  • 相关阅读:
    博客园代码
    前端
    1338. Reduce Array Size to The Half
    1220. Count Vowels Permutation
    363. Max Sum of Rectangle No Larger Than K
    366. Find Leaves of Binary Tree
    443. String Compression
    8 · Rotate String
    886. Possible Bipartition
    LT 183 wood cut
  • 原文地址:https://www.cnblogs.com/yigeqi/p/3541660.html
Copyright © 2011-2022 走看看