当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS height problem. IE8 seems correct Firefox seems wrong. Any fix?

问题描述:

Below is a complete html page that shows the problem.

The "myDiv" should be 22px in height (including the border). Item 1 should have a 1px space between its border and the "myDivs" border. In IE8 it is.

In FF 3.6.2 though it is 24px and I can't understand why. Ultimately my goal is to get the same CSS to create the same result in both browsers.

It's driving me crazy! Any help would be appreciated :)

<!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>

<title></title>

<style type="text/css">

div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }

div.aclb:hover {border:#3399FF 1px solid;}

div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}

div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }

div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;}

div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}

div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}

div.aclb li.input {}

div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;}

div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}

div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}

</style>

</head>

<body>

<div id="myDiv" style="width:250px" class="aclb">

<ul>

<li class="block">

<a class="d">x</a><span>Item 1</span>

</li>

<li class="input">

<input type="text" style="width:30px" maxlength="30"/>

</li>

</ul>

</div>

</body>

</html>

网友答案:

I just checked in firefox, it seemed, thanks to firebug, that the problem is just with the li.input. It's too tall, probably because of browser defaults, and pushes the container taller.

Set div.aclb li.input to have a height of 18px or less. For me, at least, that fixes it in FF.

网友答案:

Have you tried using CSS conditionals? http://www.quirksmode.org/css/condcom.html I know you said you want to use the same CSS for both, but this might solve the problem faster. Just do one set of CSS for IE and one for everyone else. If that doesn't work, let me know. I'll dig deeper and see if I can find a universal solution.

分享给朋友:
您可能感兴趣的文章:
随机阅读: