在不同設備中使用相同瀏覽器的不同「margin-left」結果

我試圖在單詞「blablablau」中的字母「u」上面放置圖像（帽子）。在不同設備中使用相同瀏覽器的不同「margin-left」結果

我希望得到的結果是：

我解決了這個使用此代碼：

<img id="img-hat" src="hat.png"> 
<p id="title-bla">blablablau</p>

#img-hat { 
    transform: rotate(25deg); 
    position: absolute; 
    margin-left: 118px; 
    height: 23px; 
    width: 37px 
} 

#title-bla { 
    margin-bottom: -5px; 
    font-weight: bold; 
    font-size: 170%; 
    margin-top: 2px; 
    font-family: 'Open Sans',sans-serif 
}

的問題是，使用相同的瀏覽器（如鉻）在不同的設備中，我在我的img-hat中獲得了不同的margin-left結果。

例如：在我的電腦中顯示正確。在我的筆記本電腦中它也顯示正確。但是，在另一臺筆記本電腦（具有相同的屏幕分辨率），它顯示了帽子越偏右一點點，像：

而這種行爲繼續在我的手機和我測試的另一臺計算機。

爲什麼會發生這種情況，我該如何解決這個問題？

來源

2015-09-24 Pedro Estevao

爲了避免這種問題，我真的建議你使用一個CSS復位像normalize.css這將使瀏覽器呈現的所有元素更一致。

<h1 class="title">Blumenau <i class="hat"></i></h1>

與position: absolute父元素內的position: relative使用您的圖標/圖像，這樣就可以更精確地控制您的圖標應顯示：以獲得您想要嘗試這樣的結果

的一種方式。您可以通過更改其頂部/右側或底部/左側聲明來更改圖標位置。

/* Just to put away from the border to this example */ 
body { 
    padding: 100px; 
    font-family: sans-serif; 
} 
/* 
    To avoid that margin and padding to be consider on the width and height set 
*/ 
* { box-sizing: border-box; } 
/* 
    Parent 
*/ 
.title { 
    display: inline-block; 
    position: relative; 
    font-size: 32px; 
} 
/* 
    Icon/image 
*/ 
.hat{ 
    background: url('http://s23.postimg.org/os0nl4rrr/rsz_hat.png');   
    transform:rotate(15deg); 
    top: -2px; 
    right: -9px; 
    width: 35px; 
    height: 19px; 
} 
/** 
* Icon/image position 
*/ 
.title i { 
    display: inline-block; 
    position: absolute; 
}

請參閱JSFiddle的行動。

來源

2015-10-01 13:39:20 dsalvagni

它完美的作品。 –

不同的機器有不同的分辨率，所以他們對圖像和文本的處理方式的響應顯示不同。這是預期的。基本上瀏覽器將嘗試重新調整網站以適合觀看設備。

這就是說你有沒有嘗試在你的img-hat上添加一個z-index。我個人不會經常使用z-index，但在這種情況下可能會有所幫助。你有沒有嘗試過相對定位？

來源

2015-09-24 19:34:15 LPompa

如果您將img標記放入p標記中，它將自動放置在文本的末尾。從那裏，你可以將帽子相對於原來的位置放置。你可能需要稍微調整一下左值。

<p id="title-bla">blablablau<img id="img-hat" src="hat.png"></p>

#img-hat { 
    transform: rotate(25deg); 
    position: relative; 
    left: -20px; 
    height: 23px; 
    width: 37px 
}

來源

2015-09-24 19:54:36 patrick96

不起作用，'p'元素將拉伸全寬度。最好是「內聯塊」。 – Shikkediel

我不明白這是如何產生影響的，圖片在文字後不會粘在頁面右側 – patrick96

是的，你是對的。有一些不同的風格發生。 – Shikkediel

我不希望有圖像中的HTML在所有...它的造型所以應該在CSS。

因此，我使用跨度來包裝信件以接收帽子，給它一個類並將圖像作爲背景應用於定位的僞元素。

通過確定em中的所有內容，帽子大小將根據文字大小動態變化。

.title-bla { 
 
    font-size: 24px; 
 
    margin: 0; 
 
} 
 
.large { 
 
    font-size: 72px; 
 
} 
 
.hat { 
 
    position: relative; 
 
} 
 
.hat:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-top: -.25em; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-image: url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png); 
 
    background-size: cover; 
 
    transform:rotate(15deg); 
 
}

<p class="title-bla">blablabla<span class="hat">u</span> 
 
</p> 
 

 
<p class="title-bla large">blablabla<span class="hat">u</span> 
 
</p>

然後你就可以調整或者邊緣或者定位值，它輕推到位，以適應......即使它旋轉到輕快活潑的角度。 :)

來源

2015-09-24 20:07:51

非常感謝。它水平工作（帽子總是在「你」之上）。但是，垂直方面，我仍然有一些設備之間的差異。在我的電腦裏，它顯示出我想要的，但是在我的手機中，它顯示出了更多的下降。注：我將「.hat：after」改爲「top：7; left：-5;」。 –

下面是我的手機如何顯示您自己的示例的圖像：http://s22.postimg.org/g3w0v9jz5/Screenshot_2015_09_25_09_25_38.png。你可以看到垂直方向上的帽子更上面。 –

我懷疑這是瀏覽器中默認行高的差異，請嘗試明確設置它。 – Shikkediel

不同的瀏覽器有不同的默認填充和邊距，當我們的樣式不應用時，它們訴諸於。有時候，最好把所有這些都放到0。與

body { 
    margin:0; 
    padding:0 
}

檢查啓動你的CSS文件，如果它的工作原理

來源

2015-09-27 08:59:58

是的，我已經這樣做了，但它不起作用。此外，我在PC，筆記本電腦和手機中始終使用相同的瀏覽器（Chrome）。 –

首先，要完全從權，沒有離開的位置，因爲你的信可能無法在不同的設備完全相同。即使使用網絡字體，每個帶字母的瀏覽器的顯示也會略有不同。

其次，如果你想要它非常確切，那麼你需要字體大小和行高在px或雷姆斯。根據各種設備的默認字體大小，170％可能會略有不同。此外，有時移動設備會根據短段或長段調整字體大小。

這小提琴應該有所幫助：https://jsfiddle.net/cjc5myde/1/

#title-bla { 
position:relative; top:-2px; 
display:inline-block; 
margin-bottom: -5px; 
font-weight: bold; 
font-family: 'Open Sans',sans-serif; 
font-size: 28px; line-height:38px; 
} 
#img-hat { 
transform: rotate(25deg); 
position: absolute; 
top:0; right:-25px; 
height: 23px; 
width: 37px 
}

來源

2015-09-30 15:04:52

在不同設備中使用相同瀏覽器的不同「margin-left」結果

回答

相關問題