为什么chrome以这种方式渲染这个CSS

Question

我试图用CSS创建一个带有i图标的圆圈。但是，当首次渲染页面时，圆圈看起来像一个倒置的蛋，并略微覆盖它周围的边框。 （放大浏览器以查看更多详细信息）

棘手的部分是，如果您打开开发工具并更改与其相关的任何值（宽度，高度等等），一切都将恢复正常，它将变为圆形。< /强>

https://jsfiddle.net/2yjashje/

public static void extract(File input, File outputFolder) throws IOException {
    byte[] buffer = new byte[1024];

    GZIPInputStream gzipFile = new GZIPInputStream(new FileInputStream(input));
    ByteOutputStream tarStream = new ByteOutputStream();

    int gzipLengthRead;
    while ((gzipLengthRead = gzipFile.read(buffer)) > 0){
        tarStream.write(buffer, 0, gzipLengthRead);
    }

    gzipFile.close();

    org.apache.tools.tar.TarInputStream tarFile = null;

    // files inside the tar
    OutputStream out = null;
    try {
        tarFile = new org.apache.tools.tar.TarInputStream(tarStream.newInputStream());
        tarStream.close();

        TarEntry entry = null;

        while ((entry = tarFile.getNextEntry()) != null) {

            String outFilename = entry.getName();

            if (entry.isDirectory()) {
                File directory = new File(outputFolder, outFilename);
                directory.mkdirs();
            } else {
                File outputFile = new File(outputFolder, outFilename);
                File outputDirectory = outputFile.getParentFile();
                if (!outputDirectory.exists()) {
                    outputDirectory.mkdirs();
                }
                out = new FileOutputStream(outputFile);

                // Transfer bytes from the tarFile to the output file
                int innerLen;

                while ((innerLen = tarFile.read(buffer)) > 0) {
                    out.write(buffer, 0, innerLen);
                }
                out.close();
            }
        }
    } finally {
        if (tarFile != null) {
            tarFile.close();
        }
        if (out != null) {
            out.close();
        }
    }
}

这里发生了什么？

Answer 1

我写了这封信＆＃34;我＆＃34;在它自己的跨度和增加从顶部到垂直中心的边距。至于圆圈，我修改了border-radius属性，然后删除了border-bottom：none;财产也是如此。假设你想要一个圆圈，你需要底部边框。

https://jsfiddle.net/2yjashje/3/

<div class="round-egg">
    <span class="icon">i</span>
</div>

.round-egg {
    font-size: 14px;
    background: white;
    color: #8DC641;
    border-radius: 30px;
    cursor: help;
    border: 4px solid #8DC641;
    width: 20px;
    height: 20px;
    text-align: center;
    display: table-cell;
}
.icon {
   display: block;
   margin-top: 2px;
}