Ниже приведен код страницы и css. Во всех браузерах работа нормальная кроме хрома.
В хроме ширина дива с классом "d" урезается на сумму width братьев.
Как можно решить проблему без добавления лишних элементов?
css:
|
Код:
|
ul,li,input{
margin:0;
padding:0;
font-size:1px;
}
ul{
list-style:none;
}
.itemOpen,
.itemClosed,
.itemEmpty{
margin-left:16px;
}
.content{
height:16px;
overflow:hidden;
}
.content.odd{
background:#cbccff;
}
.content.even{
background:#bdbfff;
}
.content.hover{
background:#eaff00;
}
.content.selected{
background:#ffb400;
}
.content input{
float:left;
width:12px;
height:12px;
margin:2px;
}
.a,
.b,
.c,
.e,
.f{
float:left;
width:16px;
height:16px;
background:transparent url(images/bridge-icons.gif) no-repeat 0 0;
}
.d{
width:auto;
height:16px;
padding:0 4px 0;
margin:0 32px 0 64px;
font-size:12px;
overflow:hidden;
/* background:#0f0; */
}
.e,
.f{
float:right;
}
.itemOpen .a{
background-position:0 -32px;
}
.itemClosed .a{
background-position:0 -16px;
}
.itemEmpty .a{
background-position:0 0;
} |
html:
<body>
<div class="bridgeTree">
<ul id="1.1">
<li class="itemOpen">
<div class="content odd">
<div class="a"></div>
<input type="checkbox" />
<div class="b"></div>
<div class="c"></div>
<div class="e"></div>
<div class="f"></div>
<div class="d">text-1 text-1 text-1 text-1 text-1 text-1</div>
</div>
<ul id="1.2">
<li class="itemEmpty">
<div class="content even">
<div class="a"></div>
<input type="checkbox" />
<div class="b"></div>
<div class="c"></div>
<div class="e"></div>
<div class="f"></div>
<div class="d">text-2 text-2 text-2 text-2 text-2 text-2</div>
</div>
</li>
</ul>
<ul id="1.3">
<li class="itemEmpty">
<div class="content odd">
<div class="a"></div>
<input type="checkbox" />
<div class="b"></div>
<div class="c"></div>
<div class="e"></div>
<div class="f"></div>
<div class="d">text-3 text-3 text-3 text-3 text-3 text-3</div>
</div>
</li>
</ul>
<ul id="1.4">
<li class="itemEmpty">
<div class="content even">
<div class="a"></div>
<input type="checkbox" />
<div class="b"></div>
<div class="c"></div>
<div class="e"></div>
<div class="f"></div>
<div class="d">text-4 text-4 text-4 text-4 text-4 text-4</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>