停止文本移動HTML

我有css & html代碼，我做了重疊的圖像，它工作完美，直到我收到我的客戶的投訴..重疊的文字移動時，瀏覽器縮小。我看到我的代碼沒有問題，研究證明是徒勞的。他說他希望它儘快修復，所以我尋求幫助我的同胞溢出！
CSS停止文本移動HTML

 p.contactInfo { 
     position: absolute; 
     top: 20px; 
     right: 475px; 
     width: 100%; 
     z-index: 10; 
    } 
    p.contactInfo span { 
     color: #D7D7D7; 
     font-size:13px; 
     letter-spacing: -1px; 
     padding: 10px; 
     float:right; 
    }

HTML

    <p class="contactInfo"><span>******* 
               </span></p>

DEMO http://jsfiddle.net/baGjv/

來源

2012-10-29 PwnageAtPwn

如果您需要幫助，請提供一個演示來說明問題。不要在你的問題中儘快寫出來。 – kapa

什麼圖像....？ – Madbreaks

設置從左邊緣到右邊的距離，右邊緣不是靜態的，所以當你移動它時，文本隨之移動。 –

當你使用像20px這樣的設置數字時，屏幕上會顯示20px，因爲屏幕大小不同，它會像這樣不同，想象這個「$」是位於距離左邊20px的元素。（我使用的模板爲中心左側的想象，我不能在這一點上完全確定它是否會）

large monitor 
----------------- 
    $ 


----------------- 

small monitor 
---------- 
    $ 


----------

這將是來自同一個左側，但如果你勾搭％它的價值將完全不同，並延伸到每個顯示器。「$」給出20％。如果您的網頁的其他部分是靜態的（如大多數），這將有所幫助，並且會與您網頁的其餘部分保持一致。我不是說left:20%;是你需要的確切百分比，你需要改變它。

large monitor 
----------------- 
    $ 


----------------- 

small monitor 
---------- 
    $ 


----------

來源

2012-10-29 18:46:28

正如斯賓塞所說，問題是，你正在使用right: 475px爲您的定位。當您的客戶將瀏覽器的大小調整爲-narrower時，您的項目實際上會從頁面的左邊消失，因爲「475px從右邊」的位置現在不再位於瀏覽器的顯示區域內。

我的猜測是，你認爲這個頁面總是至少是600px，即使在最小的可用瀏覽器中，有人會打開它。如果是這樣的話，你可以改正這種情況的一種方法是將body標記設置爲min-width的600px（或不論您的最小寬度是多少）。通過這樣做 - 當窗口太窄時，您將在瀏覽器中創建一個滾動條 - 但不會丟失可見性。

雖然解決您的問題的可能更好的方法是以這種方式避免使用絕對定位。絕對定位通常是最佳使用相對到相對定位的元件。請參閱this article以瞭解我所指的內容。

來源

2012-10-29 18:58:52

停止文本移動HTML

回答

相關問題