跨浏览器的传说为中心

我关于我的传说跨浏览器为中心得到不同的结果：跨浏览器的传说为中心

应该是这样的：

而是我得到其他浏览器不同的边距：

HTML

<div class="teaser-header"> 
<fieldset class="teaser-fieldset"> 
    <legend class="teaser-legend">We are a very passionate team</legend> 
    <h1>Who we are</h1> 
</fieldset> 
</div>

CSS

.teaser-header { 
    padding-top: 70px; 
} 
.teaser-fieldset { 
    border: 1px solid white; 
    color: white; 
    text-align: center; 
    width: 400px; 
    margin: auto; 
} 

.teaser-fieldset h1 { 
    color: white; 
    text-align: center; 
    margin: 0; 
    padding-bottom: 20px; 
    font-family: "Montserrat"; 
} 

.teaser-legend { 
    padding: 0 10px; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
    font-size: 1em; 
    text-transform: uppercase; 
    margin-bottom: 0; 
}

任何想法？谢谢！

来源

2016-04-18 Gibson

哪个图像是从中浏览器？ –

[此]（https://jsfiddle.net/je7b9Lv0/）是否适合您？我看到一个与旧版Firefox中的截图非常相似的问题，并且这个小工具修复了它。我不确定您在浏览哪个浏览器，因此不确定它是否解决了您的问题。如果确实如此，我会以答案的形式发布。 – Harry

你好，EDGE，FIREFOX，EXPLORER都有问题，每个人都有自己的利润空间。谢谢！ – Gibson

明确设置margin-left和margin-right，因为10％似乎解决了居中问题。 10％的价值只是一半（100％ - width）。

.teaser-header { 
 
    padding-top: 70px; 
 
} 
 

 
.teaser-fieldset { 
 
    border: 1px solid white; 
 
    color: white; 
 
    text-align: center; 
 
    width: 400px; 
 
    margin: auto; 
 
} 
 

 
.teaser-fieldset h1 { 
 
    color: white; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 20px; 
 
    font-family: "Montserrat"; 
 
} 
 

 
.teaser-legend { 
 
    /* padding: 0 10px; remove this */ 
 
    width: 80%; 
 
    margin-left: 10%; /* change this */ 
 
    margin-right: 10%; /* change this */ 
 
    color: white; 
 
    font-size: 1em; 
 
    text-transform: uppercase; 
 
    margin-bottom: 0; 
 
    text-align: center; /* add this */ 
 
} 
 

 
body { 
 
    background: black; 
 
}

<div class="teaser-header"> 
 
    <fieldset class="teaser-fieldset"> 
 
    <legend class="teaser-legend">We are a very passionate team</legend> 
 
    <h1>Who we are</h1> 
 
    </fieldset> 
 
</div>

来源

2016-04-18 16:32:26 Harry

它伎俩，非常感谢@Harry – Gibson

@Gibson：实际上，即使在将边距改为10％之后，IE11和Edge的表现也不尽相同。我删除了'padding：0 10px'并在图例中添加了一个'text-align：center'，并且IE11，Edge，Firefox，Chrome和Opera（所有最新版本）的输出都是相同的。 – Harry

跨浏览器的传说为中心

回答

相关问题