IE6 position

最新推荐文章于 2019-07-10 11:25:36 发布

转载最新推荐文章于 2019-07-10 11:25:36 发布 · 70 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fivewood/archive/2009/06/25/1510877.html

最近在试验一个圆角，

把四个角都切下来，然后用绝对定位，在FF3和IE7下都显示正常，但是IE6下，下面的2个圆角显示有问题，高了11px，上网搜索也没有相关的东西找到，只好用hack解决（我不太喜欢用hack）。但是IE6的绝对定位是没什么问题的，百思不解啊。希望高手请教啊。

ie6（没用hack的时候）:

代码如下：

Code
1

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

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>talk box</title>
6

<style>

}{
8

padding: 0;
9

margin: 0;
10

}
11

.container{

}{
12

position:relative;
13

margin:100px auto;
14

padding:5px;
15

width:300px;
16

height:100px;
17

min-height:100px;
18

border:1px solid #d8d8d8;
19

background:#f5f5f5;
20

}
21

.content{

}{
22

height:100px;
23

min-height:100px;
24

}
25

.content p{

}{
26

text-align:center;
27

}
28

.t-l,.t-r,.b-l,.b-r{

}{
29

position:absolute;
30

}
31

.t-l{

}{
32

left:-1px;
33

top:-1px;
34

width:8px;
35

height:8px;
36

background:url(http://i.namipan.com/files/579f03e02d297c7c291d7656feece4f1ec91d577430100005601/2/1.jpg) no-repeat;
37

}
38

.t-r{

}{
39

right:-18px;
40

top:-14px;
41

width:36px;
42

height:28px;
43

background:url(http://i.namipan.com/files/60b39649ca0a51e6d792715056af261675b95f00e6010000070e/2/1.jpg) no-repeat;
44

}
45

.b-l{

}{
46

left:-1px;
47

bottom:-1px;
48

/**//*_bottom:-12px;*/
49

width:8px;
50

height:8px;
51

background:url(http://i.namipan.com/files/d5b6819beab5f1435c5bc3cbb89cfb6c40ecc10a43010000210f/2/1.jpg) no-repeat;
52

}
53

.b-r{

}{
54

right:-1px;
55

bottom:-1px;
56

/**//*_bottom:-12px;*/
57

width:8px;
58

height:8px;
59

background:url(http://i.namipan.com/files/ffd261776c9119211859437e1e7b4384a149799743010000dec7/2/1.jpg) no-repeat;
60

}
61

</style>
62

</head>
63

<body>
64

<div class="container">
65

<div class="t-l"></div>
66

<div class="t-r"></div>
67

<div class="content">
68

<p>test</p>
69

</div>
70

<div class="b-l"></div>
71

<div class="b-r"></div>
72

</div>
73

</body>
74

</html>
75

刚刚在逛的时候，发现KDUED的评论框很像我现在做的这个圆角。

看了下代码<div class="commentbody"><div><p>test</p></div></div>

在commnetbody这个div里放上面2个角，在无名的div里放下面2个角。我觉得这个方法不错啊，因为它和我要的一样，宽度是不变的，高度是可以变化的。

开心ing...

转载于:https://www.cnblogs.com/fivewood/archive/2009/06/25/1510877.html