CSS实现图片自动缩放

飞天舞老兄发现我的新模板中,图片超出了范围,遮挡了侧边栏。很久很久以前喜欢发图的时候,对于这种问题往往是通过编辑器修改图片样式的高和宽,一般都不能锁定高宽比,常会导致图片变形。万一下次换模板了,内容宽度变了又会出现问题,所以我一直不怎么发图,本身也不喜欢弄图,无论截图、绘图或是找图都很麻烦。

既然图已经存在了,就不可能把它删了,折腾吧。虽然不懂CSS,但是依然能知道一点CSS很强悍,而且变得越来越强悍。搜了下CSS图片自动缩放,找到一句代码搞定这个问题:

img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}

多位搞模板的老兄都不建议使用css的表达式,而该用其他方式实现。

一个就是直接设置MAX-WIDTH属性到模板内容的宽度,不用表达式判定。

再一个就是蚂蚱兄提议的隐藏掉超出部分,这个很简单,也很有效。

CSS隐藏滚动条

      最近发现博客显示代码时,在chrome浏览器中会出现问题,用的自己做的插件FHilght,核心是SyntaxHighlighter。主要就问题是在某些模版下,行号的后面会出现滚动条,如:

截图1290843398.jpg

有些模版就不会,仔细研究了下模版的CSS文件,发现没问题的模版基本上都没设置pre样式,所以不会对代码显示产生影响,而设置了pre样式的,会按模版文件设置的显示,就会出现行高与SyntaxHighlighter设置的高度不一样,就会出现滚动条。最简单的办法就是在对应的pre样式中加一行:

overflow-y:hidden;

    就可以隐藏竖向的滚动条,横向的是overflow-x。

改后效果正常。

截图1290843438.jpg

“修理”了一下blog主题

        比较喜欢当前 Prower主题,是别人从wp移植过来的,很喜欢,但是当TE升级到0.8后有个问题,评论输出简化了,嵌套评论不能工作了。一直没怎么注意,这几天闲下来了,打理了下blog就发现了这个问题。问题是我对前端设计是一窍不通,也没得啥子艺术细胞自己设计东西,只能在论坛里找合适的主题,找来找去没得中意的。没办法了只能自己修改了。

       原来也自学过几天css,太枯燥没坚持下去,写不出来,但简单的还是能看懂,将就半调子水平、东拼西凑的改了下。主要的问题是评论嵌套的问题。0.8改了评论输出方式,以后的主题的comments.php文件跟以前的不一样。直接copy了default主题的comments.php文件覆盖当前主题统一文件,由于css文件不一样,直接浏览会出问题。再把default主题style.css文件中关于评论部分拷过来。

阅读剩余部分...

在IE中实现mini-width

在网上找到一个设置mini-width的方法,还是比较管用

.content
{
width:   80%;
width:expression(this.offsetParent.clientWidth*0.8<500?"500px":"80%");
min-width:   500px;
}     

还有个方法是用容器实现



ie6-下,容器实现模拟min-width效果。请任意改变浏览器窗口大小,再点击按钮“查看宽度”。