zoukankan
html css js c++ java
css外容器margin問題[IE中height:100%]
常用的二列布局,外容器Div定義class為container, 包含class分別為left 和main兩個子DIV,下邊是class為foot的Div
當我們想在container和foot之間加一點間隙時,fifefox卻發起了脾氣
代碼如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
測試頁
</
title
>
<
style
type
="text/css"
>
.container
{
}
{
border
:
1px #333 solid
;
width
:
600px
;
margin-bottom
:
20px
;
}
.container .left
{
}
{
width
:
300px
;
float
:
left
;
height
:
100px
;
background
:
#f60
;
}
.container .right
{
}
{
width
:
300px
;
float
:
left
;
height
:
300px
;
background
:
#ccc
;
}
.foot
{
}
{
clear
:
both
;
width
:
600px
;
height
:
20px
;
background
:
#3D78B6
;
border
:
1px solid #000000
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="left"
></
div
>
<
div
class
="right"
></
div
>
</
div
>
<
div
class
="foot"
></
div
>
</
body
>
</
html
>
以上代碼在IE6中能正常顯示,但是在firefox中container和footer之間沒有間隙,也就是說margin-bottom:20沒起作用
解決變法:
修改container,代碼如下:
.container
{
}
{
overflow
:
hidden
;
border
:
1px #333 solid
;
width
:
600px
;
margin-bottom
:
20px
;
}
區別就在這一句
查看全文
相关阅读:
关于C51的中断函数要注意的几个问题
WORD文档中插入页码的问题
【转载】vim复制时的缩进
【转载】在Linux下,一个文件也有三种时间,分别是:访问时间、修改时间、状态改动时间
【转载】LINUX上MYSQL优化三板斧
【转载】小结一下linux 2.6内核的四种IO调度算法
【转载】linux挂载mount参数优化
【转载】ipcs与Linux共享内存
【转载】Linux下的IO监控与分析
【转载】netstat--查看服务器[有效]连接数--统计端口并发数--access.log分析
原文地址:https://www.cnblogs.com/ywkpl/p/1224555.html
最新文章
数据库设计——11 个重要的数据库设计规则
Github——Git设置及GitHub的使用
Linux——配置使用github
GitHub详细教程
算法——计数排序与快速排序
网络——因特网协议栈中的层
python——二进制/十进制等转换
Python——在Unicode和普通字符串之间转换
字符编码简介:ASCII,Unicode,UTF-8,GB2312
PHP技术开发微信公众平台
热门文章
关于PHP开发的9条建议
8个必备的PHP功能开发
PHP开发Apache服务器配置
php开发中的页面跳转方法总结
非常实用的PHP常用函数汇总
having的用法以及与where区别介绍
SQL 中having 和where的区别分析
MySql中having字句对组记录进行筛选使用说明
PHP面试题三
VB网络编程中Winsock的使用
Copyright © 2011-2022 走看看