是否有可能在所有瀏覽器中實現行高一致性？

是否有可能在所有瀏覽器中實現行高一致性？是否有可能在所有瀏覽器中實現行高一致性？

我附上了一張圖片。您會注意到一個紅色的矩形框和一個綠色的矩形框（兩者寬度和高度都相同），我通過手動添加了Photoshop來幫助顯示虛線（紅色框下方）和「追隨者：3197179」文本。

似乎Firefox是唯一一個以不同方式顯示元素的人。我注意到這一點，當我申請一個行高。任何方式，我可以使這與所有瀏覽器一致？

我使用Firefox 3.6.13，Safari 5.0.3，Opera 10.63和Chrome 8.0.552.231。

CSS：

.clearfix, .container {display:block;} 

ul   { margin:0; padding:0; list-style:none; } 
li   { position:relative; margin:0 0 0 0; padding:12px 0; border-bottom:1px dotted #E7E7E7; } 

li img  { float:left; margin-top:0; } 

li p  { margin:0 0 0 58px; padding:0; font-weight:normal; border:none; font-size:1em; line-height:1.3em; } 
li p.name  { position:relative; padding-top:0; font-size:1.1em; font-weight:bold; }

HTML

<ul> 
    <li class="clearfix"> 
      <a href="#"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a> 
      <p class="name"> 
       <a href="#">Jessica Simpson</a> 
      </p> 
      <p>Blurred out text here</p> 
      <p>Followers: 3197179</p> 
    </li> 
</ul>

alt text

來源

2010-12-17 Christian Fazzini

我知道其中的差別僅僅是由一個或兩個像素。但這是客戶的要求和「必須」。是否有這樣的事情可以做，或者我應該向客戶解釋，從瀏覽器到瀏覽器的1-2像素差異是不可能實現的？ – 2010-12-17 20:50:11

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – Flack 2010-12-17 20:54:21

嗨Flack，有一些我可以做到的事情，只需很少的努力，沒有「CSS黑客」讓所有瀏覽器看起來都一樣。然而，我想知道我最初發布的案例是否屬於「不可能」類別 – 2010-12-17 21:10:45

您目前正在使用em's。也許你可以嘗試通過在線高和字體大小中使用px來更具體。也嘗試在這些文本中使用填充，也許它會工作，我認爲;）。

在任何跨瀏覽器的事情你做。沒有具體的做法來使每個渲染器都相同。這是大多數客戶不理解的夢想。對我而言，最好總是向他們解釋他們需要什麼以及我們花費多少時間來處理像1px/2px這樣的差異。這很平常。您可以檢查this video by Andy Clarke speaking about cross browser and some other cool stuff。

來源

2010-12-18 02:14:23

嗨Ragingmon，嘗試使用像素來代替。結果是最糟糕的。這意味着更多的空間/差距。有趣的視頻:-)感謝您指出這一點 – 2010-12-18 06:52:47

沒問題的隊友。那麼迄今爲止的解決方案？：D – 2010-12-21 07:11:14

我基本上只是解釋一下。所有瀏覽器都完美無缺:-) – 2010-12-21 08:24:10

您使用的CSS重置？這些有助於緩解大部分跨瀏覽器問題。邁耶網有一個流行的：http://meyerweb.com/eric/tools/css/reset/

來源

2010-12-17 20:51:40

例如，http://meyerweb.com/eric/tools/css/reset/ – BryanH 2010-12-17 20:52:57

嗨巴貝克，是的，目前正在使用藍圖，其中包括reset.css，並已加載 – 2010-12-17 20:53:36

你有沒有指定任何常用規則？例如：

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-size: 100%; 
    line-height: 1; 
}

即使沒有完全reset.css的方法，有時候這會有所幫助。

來源

2010-12-17 20:53:30 Flack

是的，也有這些設置。我仍然看到1-2像素的差距，因爲在最初的帖子 – 2010-12-17 20:57:52

中顯示的屏幕截圖我發現這在另一個環境中很有用。感謝分享！ – kevincoleman 2014-03-12 05:48:46

您可以添加line-height只有Mozilla中，通過使用：

@-moz-document url-prefix() { 
    *, body { 
     line-height: [as per your requirement]; 
    } 
}

來源

2017-11-22 14:24:26

Mozilla不再支持此方法。 https://developer.mozilla.org/en-US/docs/Web/CSS/@document – jtheletter 2018-01-23 21:21:22

這可能是字體是如何被呈現。嘗試將此用作字體系列。

font-family:"Arial Unicode MS","Lucida Sans Unicode";

來源

2018-03-05 19:58:26

是否有可能在所有瀏覽器中實現行高一致性？

回答

相關問題