关于CSS样式的问题,急.急.急....

html-css019

关于CSS样式的问题,急.急.急....,第1张

这个是IE默认font-size属性的问题

IE默认的font-size:12px会影响盒子的高度,除非你盒子里面有文字,

以后记得在没有内容的DIV里面加上 font-size:2px

所以你只要给 .main 加上 font-size:0px就OK了。

当然,.main里面要加内容的话,你可以把 font-size:0px放到各个定角的DIV。

以下是我调整过的:

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="ChatWindow.css" />

<script type="text/javascript" language="javascript">

</script>

</head>

<style>

*

{

margin:0px

padding:0px

border:0px

}

.main

{

position:absolute

top:20px

left:20px

border:1px solid black

width:450px

height:500px

font-size:0px

}

.top_border

{

position:absolute

left:3px

top:0px

width:444px

height:3px

background-color:#FFCC00

cursor:n-resize

}

.left_border

{

position:absolute

left:0px

top:3px

height:494px

width:3px

background-color:red

cursor:e-resize

}

.right_border

{

position:absolute

right:0px

top:3px

width:3px

height:494px

background-color:#009900

cursor:e-resize

}

.bottom_border

{

position:absolute

bottom:0px

left:3px

width:444px

height:3px

background-color:#660000

cursor:n-resize

}

.right_bottom

{

position:absolute

right:0

bottom:0

width:3px

height:3px

background-color:#000000

cursor:nw-resize

}

.left_bottom

{

position:absolute

left:0

bottom:0

width:3px

height:3px

background-color:#000000

cursor:ne-resize

}

.left_top

{

position:absolute

left:0

top:0

width:3px

height:3px

background-color:#000000

cursor:nw-resize

}

.right_top

{

position:absolute

right:0

top:0

width:3px

height:3px

background-color:#000000

cursor:ne-resize

}

</style>

<body>

<div class="main">

<div id="top_border" class="top_border"></div>

<div class="left_border"></div>

<div class="right_border"></div>

<div class="bottom_border"></div>

<div class="right_bottom"></div>

<div class="left_bottom"></div>

<div class="left_top"></div>

<div class="right_top"></div>

<div class="title"></div>

<div class="chat_note"></div>

<div class="tools"></div>

<div class="editer"></div>

<div class="footer"></div>

</div>

</body>

</html>