0

我会提前道歉......我不是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">

谢谢。

4

2 回答 2

2

从我的测试来看，如果你为你的.circlecss 删除这些规则，

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

并将它们替换为

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

，你会得到想要的结果。在 Internet Explorer (9&10)、Google Chrome 和 FF 中测试和比较。

我不确定具体的原因是什么，但浏览器特定的正文和 html 填充/边距确实起了很小的作用。

于 2013-05-21T00:29:34.450 回答
0

我决定在按钮和圆圈周围添加一个 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>'));
    });

谢谢。

于 2013-05-21T12:39:56.900 回答