Question

我希望尽可能向右浮动一个在Chrome中正确渲染的图像，但在FireFox中它有不正确的边距顶部，它穿过底部分隔线。

Example in Chrome
+--------------+
|Category     X|
+--------------+

Example in FF (too much margin-top)
+--------------+
| Category     |
+------------X-+

当在图像上使用浮动时，如何使浏览器之间的边距保持一致？

<li>
    <a>
              Category 2 (10%)
              <img class="pull-right" src="icon.svg">
    </a>
</li>

Answer 1

您是否尝试过重置边距和填充？

package fadder;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

public class Fadder {
    private final int n;
    Fadder(int n){
        //initialize Fadder
        this.n = n;
    }
    Fadder add(int m){
        //create new Fadder
        return new Fadder(n+m);
    }
public static void main(String[] args) {
     int threadnum = Runtime.getRuntime().availableProcessors();
        ExecutorService executor = Executors.newFixedThreadPool(threadnum);
        Fadder MyAdder = new Fadder(1);
        for (int i = 0; i < 5; i+=1 ) {
            int index = i;
            //lambda function to print Fadder
        executor.submit(() -> {
                    System.out.println(String.valueOf(MyAdder.add(index)));
                });
    }
    executor.shutdown();
}
}

Answer 2

在css中应用以下规则解决了这个问题！

img{
      position: absolute;
      right: 0px;
      margin-top: 5px;  /* not mandatory but useful for vertical adjustment*/
}

Chrome和FF现在表现相同！

Answer 3

你只能使用

为firefox编写不同的css

@-moz-document url-prefix() {
    /* your css according to firefox */
}

对于Internet Explorer

<!--[if IE]>
<style type='text/css'>
     /*your css according to IE */
<![endif]-->

Bootstrap / CSS - 修复浮动右图像的跨浏览器边距不一致

3 个答案: