-1

我的设计师同事显然在他的 Photoshop 中很好地对齐了他的文本。当文本周围总是有一些空间时，我如何将他的设计应用到我的代码中？我的意思是我可以摆弄负边距、行高（见示例）或任何东西。但这不能成为解决方案。这个问题很可能已经出现

一个例子：http: //jsfiddle.net/bfpPS/

html:

<section>
     <h1 class="wrong">WRONG</h1>
    <img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
     <h1 class="right">Isn't it beautiful!</h1>
</section>

CSS：

section, img, h1 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    line-height: 1.4285714285714em;
    vertical-align: baseline;
    background: transparent;
    font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}
img {
    height: auto;
    max-width: 100%;
    width: 50%;
    float: left;
}
h1 {
    font-size: 2em;
}
.wrong {
    float: left;
}
.right {
    line-height: 0.7em;
}
4

1 回答 1

0

我们都知道“错误”是正确的编码方式。您的设计师在这里错了，而不是您的 CSS。通常当我遇到这样的情况时，我会忽略确切的设计，并按照我知道的正确方法去做，然后如果有人抱怨，我会告诉他们网络就是这样工作的。即使您设置了负边距或做一些其他骇人听闻的事情，在具有不同可用字体或设置较大字体大小等的浏览器中也会出现错误。为什么要为这些骇客操心呢？只要做对。

于 2013-09-27T14:25:02.063 回答