停止文本移动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

回答

相关问题