Archive for the ‘HTML+CSS’ Category

在IE8下DIV margin:0 auto不居中的解决办法

星期四, 六月 5th, 2014 1 views

RT,用<center>标签完美解决

1
2
3
4
5
6
7
8
9
 <center>
      <div style="margin:0 auto;">
        <p>[ 我为痴狂 ]</br>
        </p>
        <p><a href="http://creater.beitown.com/?cat=3" >Creater 创世记</a></p>
        <p><a href="http://coder.beitown.com" >Coder 编码之源</a></p>
        <p style="text-align:right">—— BeiTown-北呈-2014-星夜河殿下</p>
      </div>
 </center>

BeiTown
2014-06-05

margin:0px auto在IE中失效的解决方案

星期日, 五月 19th, 2013 13 views

这个问题其实是N年前的问题了,刚刚遇到一个网站需要修复首页的错位问题,因此写下来顺带温习一下:
错位的表现为网站主框架DIV,即warp不居中,准确的说是在IE中不居中,firefox、chrome浏览器无此bug。

检查网站源码发现缺少了一个DOCTYPE声明
在网站首页代码最顶部添加如下代码:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]

保存后即可成功居中。
多数在IE浏览器中margin:0px auto失效的情况均为缺少这个DOCTYPE声明造成的。

BeiTown
2013.05.19

利用JS+CSS去除网站绑定广告

星期日, 十二月 30th, 2012 40 views

应Eric同学邀请,出手帮忙去掉免费服务器的一个附带广告。广告如下,是一个右下角悬浮广告:

用火狐FireBug看了一下源码,该广告的代码如下:


(更多…)

纯CSS右下角DIV浮动方法

星期五, 十二月 21st, 2012 26 views

做一个右下角浮动的DIV,之前考虑用JS来取浏览器高度,然后利用float:right; margin:浏览器.hight-DIV.height来做。但根本不需要这么复杂。

代码如下:

1
2
3
4
5
6
7
8
<div style="width:100px;
            height:100px;
            background-color:#fff;
            right:0px;
            bottom:0px;
            position:fixed;"
>
          TEST DIV
</div>

但此代码只在FireFox、Chrome及IE6以上浏览器下有效,要支持IE6则需要将position改成absolute

1
2
3
4
5
6
7
8
<div style="width:100px;
            height:100px;
            background-color:#fff;
            right:0px;
            bottom:0px;
            position:absolute;"
>
          TEST DIV
</div>

这个时候所有浏览器的效果都统一了,但是有一个弊端就是不会随着滚动条滚动。
所以如果需要精确控制DIV的位置,推荐的方案还是使用JS。

BeiTown
2012.12.21