这半年做专题和项目的过程中,遇到一些有时很难想到问题,今天在这总结以下:
1. 关于100%缩小窗口时背景图片出现空白bug ,刚开始找了半天方法都没解决,最后在里面加了最小宽度给解决了,
例如: <div class="top">
<div class="tpInner"></div>
</div>
.top{ 100%;
height:30px;
backgroud:#ccc;
min-980px; //解决背景出现空白问题
}
.tpInner{980px; margin:0 auto;}
2. 关于专题中的banner大背景图片垂直居中随着浏览器缩小出现空白问题,
<div class="banner"></div>
.banner{ backgroud:url(banner.jpg) no-repeat center top; width:100%;height:450px;}
解决的方法:
.banner 中加个div,.banner设置最小宽度,.banner中div加宽度,居中。
.banner{ backgroud:url(banner.jpg) no-repeat center top; width:100%; min-1200px;}
.bannder div{ 1200px; margin: 0 atuo; }
3. 关于IE6下button的内边距问题,
给button加背景图,在ie6和ie7中,内边距会增加,使按钮比预想到效果要长,
最后查了一下资料解决的办法是给button样式中加上overflow:visible;
4. 关于给input[type=submit]加背景图片,在ie6和ie7中出现黑色的边框问题
解决办法就是在input标签外面再加一个标签,把input默认的样式都重置,然后在input外面的标签加样式和背景图片,
另外一种方法就是用滤镜的方法
input[type=submit],
input[type=reset],
input[type=button]{
filter:chroma(color=#000000);
}
5.关于层不能覆盖textarea和select的解决方法
用iframe框架模拟跟显示的div宽度和高度一样