每次移动浏览器时，元素都会移动，我希望它保持相同的位置。有人有解决方案吗？在此先感谢您的帮助。 JSfidle在这里：http://jsfiddle.net/cntra/E7Ydz/19/
[HTML]如下：
<div class="column"> <div id="text-display">
<span id="targetElm">Your Daily Dose of Contrabang</span>
</div>
<div class="morphing-tinting">
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contrabang">
<span class="image-wrap" style="position:relative; left: 0px; top:0;
display:inline-block;
background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center;width: 250px; height: 250px;"></span></a>
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contraswag"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a>
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contradads"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a></div>
<div class="cntratop">
<li class="live"> <a target="_blank" href="#">CONTRABANG.TV</a></li>
<li><a target="_blank" href="#">MUSIC</a></li>
<li><a target="_blank" href="#">FASHION</a></li>
<li><a target="_blank" href="#">FEATURES</a></li>
<li><a target="_blank" href="#">REVIEWS</a></li>
<li><a target="_blank" href="#">NEWS</a></li>
<li><a target="_blank" href="#">VIDEOS</a></li>
<li><a target="_blank" href="#">EVENTS</a></li>
</div>
这是[CSS]
.cntratop{
font-family: sans-serif;
font-size: 12.5px;}
.cntratop ul{
list-style:none;
margin-left: auto ;
margin-right: auto ;
text-align: center;}
.cntratop li{
display:inline-block;}
.cntratop li:first-child{
margin-left:0px;}
/*navbar text*/
.cntratop a{
display:inline;
padding:15px;
text-decoration:none;
color:#888888;
cursor:pointer;}
.cntratop a:hover,
.cntratopli.live a{
font-weight:bold;
color:#E94F78;
}
.column{
background:transparent;
width: 960px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
padding: 0px;}
.srch{
background:transparent;
width: 960px;
margin-top: 5px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
padding: 0px;}
#search-box{
list-style-type: none;
display: inline;
margin-left: 0px;
margin-right:0px;
}
#search-form {
background-color: transparent;
position: relative;
}
#search-box input[type="text"] {
width: 400px;
font-family:Georgia;
font-style: italic;
font-size: 90.0%;
padding: 0px 2 2px 10px ;
color: #999;
outline: none;}
#search-text {
font-size: 13px;
font-family:Georgia;
font-style: italic;
border-width: 0;
background: transparent;
}
#portfolio{
display:inline;
margin: auto;
text-align: center;
}
#text-display
{top:; position: relative;
display:inline-block;
padding:5px 10px;
font-family:sans-serif;
font-weight:bold;
font-size:50px;
color: white;
text-align: center;
line-height: 1.2em;margin:0px;
background-color:#E94F78;
}
.morphing-tinting .image-wrap {
position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
#socialNetworks{
float:right;
margin-top: 110px;
margin-bottom:60px;
}
.twitterBtn{
float:left;
background-image:url(images/twitter.png);
background-position: top left;
border:none;
display:block;
margin-left:15px;
width:24px;
height:22px;
}
.twitterBtn:hover {
background-position: bottom left;
}
.facebookBtn{
float:left;
background-image:url(images/fb.png);
background-position: top left;
border:none;
display:block;
margin-left:15px;
width:24px;
height:22px;
}
.facebookBtn:hover {
background-position: bottom left;
}
#project{
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
height:200px;
width:310px;
display: inline;
overflow:hidden;//trick to ensure all elements fit in portfolio
}
.workEntry{
width:310px;
overflow:hidden;
float: left;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
margin-left: auto;
margin-right: auto;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}
#backToTop{
width:61px;
height:30px;
float:left;
margin-left:515px;
margin-top:-27px;
}
#allsharer{
float: right;
margin: 17px 158px 0 0;
}
.twitter-share-button {
width: 92px !important;
}
.fb-button {
position: relative;
top: 2px;
}
答案 0 :(得分：1)
为您的包装提供min-width，并声明max-width / width。您将获得一个水平滚动条，但您的“元素”将保持原位。您的“元素”自然会随着视口大小一起流动，因此如果缩小浏览器，“元素”应该随流移动。如果声明视口是特定大小，则流将在新大小内移动。
希望这有帮助。
P.S。 - IE7 / 8不喜欢min-width或max-width，所以你必须使用Modernizr或Google来进行CSS黑客攻击。