Question

我会事先道歉......我不是css专家。我有一个问题，我在按钮旁边画一个圆圈。圆圈在IE中正确显示，但在Firefox中，它太高了。

我定义了以下css类：

.circle {
    width:1.2em;
    height:1.2em;
    border-radius:50%;
    font-size:2em;
    color:#fff;
    line-height:1.2em; /* must match the height */
    text-align:center;
    background:#2b5f77;

    font-family: "Times New Roman";
    text-align: center;
    vertical-align: middle;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    top:239px;
    left: 340px;
    border-style: solid;
    border-width: 1px;
}

.circle:hover {
   border-top-color: #28597a;
   background: #28597a;
   color:#ec9226;
   }
.circle:active {
   border-top-color: #1b435e;
   background: #4d8eAE;

 }

然后是渲染圆圈的代码：

<div class="circle" value="i">i</div>

如何更改此代码，以便圆圈出现在所有浏览器的同一位置？

编辑1

我正在使用IE 9标准模式进行测试。如果重要的话，开头的html标签看起来像这样：

<!DOCTYPE HTML>
<html lang="en">

感谢。

Answer 1

从我的测试中，您似乎删除了.circle css

的这些规则

.circle {
    position: absolute;
    top:239px;
    left: 340px;
    }

并用

替换它们

.circle {
    position: relative;
    margin: 239px 0px 0px 340px;
    }

，您将获得所需的结果。在Internet Explorer（9＆amp; 10）中测试和比较，谷歌Chrome和＆amp; FF。

我不确定这是什么原因，但浏览器特定的身体＆amp; html填充/边距确实起了很小的作用。

Answer 2

我决定在按钮和圆圈周围添加一个div。然后强制这样的位置：

.shared
{
    position: absolute;
    width: 200px;
}
.buttonalign {
    position: absolute;
    display: block;
    top:255px;
}

.circlealign {
    position: absolute;
    top:255px;
}

以下是创建/修改html的代码：

    $(document).ready(function() {
        $(".submit").addClass("buttonalign");
        $('<div class="shared">').insertBefore($('.submit'));
          $('.submit').after($('<div class="circle circlealign" value="i">i</div></div>'));
    });

感谢。

css问题：在Firefox中，圆圈出现在与IE不同的位置

2 个答案: