昨天的CSS样式问题其实很容易解决

Leave a Comment»

i-love-wordpress

WordPress~ 真的让我学到了不少有趣的东西!


　　昨天的我很郁闷,原因在这里. 现在的我心情不错,有豁然开朗的感觉, 解决问题的感觉真tmd的有快感,所以我需要遇到许多问题,然后尽我所能一一解决之,那样是不是就...-.-

　　经Lucifr和slim两位友人的提醒,我在原有的CSS样式中添加了一句控制行高的代码,变成这样:

#ttf ul li {
float:left;
margin-right:10px;
overflow:hidden;
line-height:17px;
padding:5px 0 2px 18px;
white-space:nowrap;
width:140px;
}

　
　　目前我很确定的一点是,出现显示上的问题最根本的原因是高度没有控制好,因为加上line-height后,FireFox3那是根本没问题的,IE5.5-IE7下侧边栏全部恢复正常,可还有一个遗漏,那就是IE8...虽然IE8只是个测试版本,但既然都看到有问题了,难道随它去?! 这不是我的风格,我满脑子的解决,解决,解决! 经Oyster提醒,尝试着把line-height换成了height,以上代码变成这样:

#ttf ul li {
float:left;
margin-right:10px;
overflow:hidden;
height:17px;
_padding:6px 0 1px 18px;
padding:5px 0 2px 18px;
white-space:nowrap;
width:140px;
}

　
　　又多加了一句_padding,这是针对ie6专门写的hack代码,只在ie6下有效,如此一来,令我纠结几十个小时滴问题全面解决,hoho^o^. 有朋友说我这css写有够乱的,厄...初次接触这么多css的进阶知识,实在一时之间难以做到整洁,写的语句目标也是使得前端显示正常即可. 所以大家如果有好的建议,或者对以上css架构有不同的想法,欢迎留言让我观摩并学习.另外,Chada同学可以过来坐享其成了...

注: 如果对我写的语句不太明白什么意思,建议去这里好好学习并查询下,或者谷歌也是可以的.

> Tags: , , , , , ,
> 本文归于行业&博客,由Yacca发布于2008.07.31 19:23.引用请trackback.
> 如需转载烦请添加以下信息: 本文内容转载自Movie Castle[www.eemir3.com].
> 如喜欢这篇文章或者本站,建议您RSS订阅本站,以及时地获取更多精彩内容!
  本日志现有 49 条精彩评论 | Leave a Comment»
  1. 很实用网站 said in 2008.07.31 19:29:　Reply
    1

    CSS兼容性问题需要特别注意的。

  2. Estyle said in 2008.07.31 20:08:　Reply
    2

    太复杂了。
    CSS，我是菜鸟，吃了我吧！

  3. 小墨 said in 2008.07.31 20:30:　Reply
    3

    这侧边栏做的
    佩服
    。。。。真的很不错

  4. Lucifr said in 2008.07.31 21:11:　Reply
    4

    果然是perfect~~

  5. oyster said in 2008.07.31 21:23:　Reply
    5

    哈哈 这几天我比较困惑和繁忙的.
    所以也没有认真的帮 yacca 解决这些问题.
    呵呵,想不到竟然耗费了他几十个小时,实在不好意思啊.
    不过也让他自己学到了更多 恩 不错 呵呵

  6. oyster said in 2008.07.31 21:28:　Reply
    6

    迷茫的前途啊

    我要赚外快~~~

    各位请教如何接私单子啊

  7. Dickey said in 2008.07.31 22:18:　Reply
    7

    Yacca 算是完美主义者，竟要调试到所有浏览器所有版本都完美无错，
    很佩服你的严谨认真态度，以及惊人的耐心。

  8. Dickey said in 2008.07.31 22:25:　Reply
    8

    看到你讲“所以我需要遇到许多问题,然后尽我所能一一解决之”
    提个新问题给你：头像的背景色，火狐下是透明无背景，IE6下是灰色背景。
    这个现象，从我的头像以及oyster的头像可看出，本来期望的是透明背景效果。

  9. 老N said in 2008.07.31 22:34:　Reply
    9

    精益求精啊~~yacca真用心

  10. homer said in 2008.07.31 23:31:　Reply
    10

    哇 真是完美的男人哈。。。

  11. 房房 said in 2008.08.01 1:32:　Reply
    11

    学了一招哈~~~~~

  12. Black-Xstar said in 2008.08.01 1:52:　Reply
    12

    CSS太复杂了，不适合我。

  13. schuen said in 2008.08.01 3:22:　Reply
    13

    要让所有浏览器效果一样真麻烦

  14. oyster said in 2008.08.01 9:46:　Reply
    14

    这个问题 其实早有解决方法
    1:你把图片转为gif格式,但是这个格式将不那么圆滑.
    2:css样式 滤镜效果

  15. Yacca said in 2008.08.01 10:11:　Reply
    15

    标准太多了...愤怒!

  16. Yacca said in 2008.08.01 10:11:　Reply
    16

    你是coder高手...

  17. Yacca said in 2008.08.01 10:13:　Reply
    17

    用firebug可以把我的侧边栏搬走...^^

  18. Yacca said in 2008.08.01 10:14:　Reply
    18

    嘿嘿,了解了line-height与height的区别,以前是模糊的概念

  19. Yacca said in 2008.08.01 10:14:　Reply
    19

    我也忙,不过空下来就会考虑这些遇到的问题.

  20. oyster said in 2008.08.01 10:15:　Reply
    20

    css:
    --------------
    .imgfilter{
    width:50px;
    height:50px;
    filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=
    bEnabled,sizingMethod=sSize,src=imgurl)
    }
    ----------
    html
    ----------

    注意 这里不能用img标签 因为img所指向的图片会覆盖滤镜的效果,即使你src为空 也也有恶心的叉.

  21. Yacca said in 2008.08.01 10:15:　Reply
    21

    关系啊 渠道啊 ... 口碑啊...

  22. Yacca said in 2008.08.01 10:16:　Reply
    22

    主要是我看到了...就非得消灭掉或者找到替代方案...

  23. Yacca said in 2008.08.01 10:16:　Reply
    23

    嗯...滤镜麻烦-.- 还是gif简单哇.
    我这里的头像设置为32X32...所以用gif或者jpg吧兄弟...-.-

  24. oyster said in 2008.08.01 10:17:　Reply
    24

    html
    ----------
    ＜div class="imgfilter">＜／div>

    靠 这里半角的尖括号 被和谐了啊

  25. Yacca said in 2008.08.01 10:17:　Reply
    25

    害羞~^^

  26. Yacca said in 2008.08.01 10:25:　Reply
    26

    -.-... 这么一喊我以为怎么唬别人声称自己非男?!

  27. Yacca said in 2008.08.01 10:29:　Reply
    27

    这个...就当是我的一个教训了,呵呵...大家遇到同类问题的话,多考虑下总能找到问题所在滴.

  28. Yacca said in 2008.08.01 10:29:　Reply
    28

    你适合app,我知道的

  29. Yacca said in 2008.08.01 10:29:　Reply
    29

    ie就好几代了...再加上ff opera........

  30. 胡戈戈 said in 2008.08.01 10:33:　Reply
    30

    厉害啊

  31. Yacca said in 2008.08.01 10:34:　Reply
    31

    好吧,我尝试.

  32. Yacca said in 2008.08.01 10:34:　Reply
    32

    河蟹是很正常的,理解下.

  33. Yacca said in 2008.08.01 10:38:　Reply
    33

    哪里...看到你的订阅量...那才叫厉害!20w...

  34. oyster said in 2008.08.01 12:18:　Reply
    34

    到我的blog来看完整的解决方法吧
    帮你们写成代码了 .
    http://www.flywud.com/wind/150/

  35. Yacca said in 2008.08.01 12:39:　Reply
    35

    好吧,允许你做次广告...呵. 我已经添加css滤镜完毕

  36. Chada said in 2008.08.01 14:29:　Reply
    36

    咔咔，那么真要感谢yacca了，我说了要坐享其成的，哈哈。。
    同样的感谢送给为我和yacca解决了这个问题的各位大大～
    棒极了，拿走，折腾去～～～

  37. Yacca said in 2008.08.01 15:17:　Reply
    37

    have fun~^^

  38. Eureka said in 2008.08.01 23:40:　Reply
    38

    WordPress的确能学到了不少有趣的东西，呵呵呵

  39. Yacca said in 2008.08.02 17:01:　Reply
    39

    乐在其中...^^

  40. ddkk3000 said in 2008.08.04 18:49:　Reply
    40

    你的Css太复杂了，才造成了这样原因。解决问题很简单，那就是把每个浏览器都定义一遍。

  41. ddkk3000 said in 2008.08.04 18:51:　Reply
    41

    好吃吗，芽茶。

  42. ddkk3000 said in 2008.08.04 18:51:　Reply
    42

    没事搬你侧边栏干嘛。

  43. ddkk3000 said in 2008.08.04 18:53:　Reply
    43

    不行，忍不住最后垃圾评论一条。

  44. Yacca said in 2008.08.04 21:05:　Reply
    44

    小墨这不是不想自己动么 呵呵,可以把我的sidebar拿走

  45. Yacca said in 2008.08.04 21:05:　Reply
    45

    不是荤的 不开心...

  46. Yacca said in 2008.08.04 21:06:　Reply
    46

    -.- 昏厥掉...那样更复杂啊. 现在只需要把有异议的语句hack下即可,全部定义一遍 css文件又要大很多...

  47. Dickey said in 2008.08.05 7:04:　Reply
    47

    继续来找茬，再提个问题：IE6 ，不显示导航栏的下拉菜单！
    抱歉，其实以前就发现了，只是一次讲多个问题似乎不太好。

  48. Yacca said in 2008.08.05 9:21:　Reply
    48

    这个问题,我依然无法解决...等zeus出解决方案了 哈哈

  49. Trackback/Pingback
    新主题“Kaba”的出生说明 - 不常识 said in 2008.12.05 13:39:　Reply
    49

    [...] 首先，感谢一下直接或间接协助本主题完成的人！ 1.Yacca。我从他的主题偷（师）了不少代码。侧边栏的分列展示也是copy了他的代码，否则我自己不知道要研究多久。 [...]


    评论是一种美德,请您务必身体力行! | Back To Top»

上一篇: 棘手且恼人的侧边栏分列显示bug
下一篇: [花天走地]之《A Song For You》

Copyright© 2007-2009 Movie Castle, Since 2007.12.24 | Skin by BlogOhBlog, Modify by Yacca | Alexa | Chinaz | Stats