Question

不要非常使用CSS，所以这可能是一个简单的解决方案。我正在尝试在右下角的jpg证书上对齐动态日期值。它在固定的图像线上对齐。在Safari浏览器中对齐看起来很棒，但在Chrome和Firefox上向右移动并在Internet Explorer中向左移动。示例小提琴：http://jsfiddle.net/jeffbarclay/evu1y9ao/

.certDate {
font-size:14pt;
font-family:Trebuchet MS;
font-weight:normal; 
position: absolute;  
top: 480px; 
left: 780px;   
}

Answer 1

使用右侧和底部而不是左侧和顶部。

.certDate {
    font-size: 14pt;
    font-family: Trebuchet MS;
    font-weight: normal; 
    position: absolute;  
    bottom: 0; 
    right: 0;   
}

确保容器具有适当的高度和宽度，并且位置是相对的。

Answer 2

不同的浏览器具有不同的default-css规则。要将所有这些考虑在内，通常最好的做法是下载normalize.css文件并将其附加到项目中。它可以调整默认的体边距和填充等内容，使一切都一致。你可以从这里下载：

Normalise.css git

希望这有帮助。

Answer 3

通过添加<div class='certificate;>代替img来解决，感谢@Adam Milecki

.certificate {
background-image: url(http://www.mcfrsit.com/TestCert/quizimages/cert.png);
background-size: 100% 100%;
height: 300px;
width: 800px;
padding: 50px;
position: relative;
}

.certDate {
font-size: 14pt;
font-family: Trebuchet MS;
font-weight:normal;
position: absolute;
bottom: 50px;
right: 100px; 
}

.certHead {
font-size:40pt;
font-family:Trebuchet MS; 
position: absolute; 
top: 130px; 
left: 0; 
width: 100%;  
}

.certBody {
font-size:28pt;
font-family:Trebuchet MS;
font-weight:normal;
width: 100%;  
}

不同浏览器上的CSS对齐方式

3 个答案: