小编Syr*_*ren的帖子

定位:before和:after伪元素的正确方法是什么,比如图片？我一直在用一堆不同的方式搞乱,但它们似乎都不是非常优雅的解决方案.

这就是我想要做的:

这就是我做的:

div.read-more a:before {
    content: url('/images/read_more_arrow_sm.png');
    position: absolute;
    top: 4px;
    left: -15px;
}

<div class="read-more">
    <a href="#">Read More</a>
</div>

我基本上只想让图像与文本对齐.还有另一种方法吗？

如果我可以在:before图像上使用填充和边距,这将是完美的,这应该是你做的.但由于某种原因,这对我来说并不适用.我可以添加水平填充和边距,但顶部和底部填充不会做任何事情.为什么会这样？

所以我遇到了一个我在IE8中无法弄清楚的错误.我见过一些doozies,但这个可能会拿走蛋糕.

我尝试在Codepen中复制它,但我们有很多代码,所以我将尝试包括IE8中的计算样式.

使用Foundation 5,我有一个Top Bar,看起来像这样:

下拉列表绝对定位,因此显然不应该伸出父容器.它实际上并不伸展父母,而是祖父母.这是标记:

<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
    <ul class="title-area">
        <li class="name">
          <a href="">Title</a>
        </li>
    </ul>
</section>

    <section class="links top-bar-section">
        <ul class="left">
            <li class="divider"></li>
            <li><a href="">Create</a>
            </li>
            <li class="divider"></li>
            <li class="has-dropdown">
                <a>Explore</a>
                <ul class="dropdown tab-left" id="explore-menu">
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                    <li><a href="#">Link 3</a>
                    </li>
                </ul>
            </li>
            <li class="divider"></li>
            <li><a href="#">Find</a>
            </li>
        </ul>
    </section>
<section class="top-bar-section">
    <ul class="right">
      <li class="has-form search">
          <form id="header_search" name="search_form">
              <input type="search" placeholder="Search" class="search" results=3 id="search_term" …

我之前使用过Safari的开发人员工具,并没有遇到任何问题.在"开发"下拉列表中,它显示设备,然后显示safari所在的网站.这就是它目前适用于我的iPhone 4s的方式.

我现在正试图在iphone 5上进行测试,设备显示在"开发"菜单中,但嵌套下拉列表显示"用于开发".我试过点击它没有任何反应.

有没有人遇到过这个问题？我已经在Safari 7.0和Nightly Build中进行了测试,两者都是相同的.

我在使用多个背景制作按钮时遇到了一些麻烦.我知道我可以使用:之前和之后但我想在可能的情况下弄明白这一点.

这是Jsfiddle http://jsfiddle.net/syren/qerUT/1/

在那,我已经展示了我最终希望它看起来像什么.在那一个,我用过

background-position: left top, 97% 90%;

只是为了展示我想要它的样子.因为我希望它能够优雅地扩展以用于其他按钮和翻译,我想使用它:

background-position: left top, right 5px bottom 5px;

但这不起作用.根据规格它应该,所以我不确定我做错了什么.有任何想法吗？谢谢!

让我们开始说我理解盒子模型.在我作为开发人员的短暂时间里,我试图非常贴近语义html并使用响应式设计实践.我最近在Jr. Developer的新公司找到了一份工作,而我的老兄则虔诚地反对填充.就像他不想在任何情况下都使用它一样.他希望我在所有东西上使用设置高度和宽度,如果我需要模拟填充,我必须使用边距添加子div.例如:

<div class="caption" style="padding: 5px;">
   Caption
</div>

需要成为

<div class="caption">
   <div class="captionContainer" style="margin:5px;">
       Caption
   </div>
 </div>

我试图弄清楚为什么会这样,以及我怎么可能解释为什么我认为这很糟糕,但它不起作用.这对我来说似乎是错的.他说这是因为填充拉伸了一个元素的宽度,我用盒子大小来响应:border-box.

我必须按照他的说法去做,但有时我们谈论它,他似乎有点接受我的建议,但我不认为我说的是正确的事情.它真的更好吗？如果不是,为什么？

这个问题可能因为讨论而被关闭 - 但是这让我发疯,我不知道还有什么地方可以转.

提前致谢!

我觉得很愚蠢,就像我错过了一些非常明显的东西,但我已经检查了一切,无法弄清楚是什么问题.我正在尝试使用CSS3pie在ie8中制作圆角,但它不会采取.

我有相对于html文档设置的路径,而不是css.它位于一个名为pie的文件夹中,所以这就是我在CSS中使用的:

#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
 }

有谁知道更多关于css3馅饼谁可能会告诉我我缺少什么？我已经在很多不同的元素上试过了它并没有用过一次.