Question

我开发了一个网页，其中包含一个我已应用相对定位的图像元素，以便将元素定位在距离页面左侧恰当的位置。

在我测试期间，我使用IE8（虽然它不会得到官方支持），IE9，Firefox和Chrome浏览器。对于浏览器之间的一些轻微像素差异，该页面呈现得相当好;但没什么大不了的。使用最大屏幕分辨率1280×1040

测试这些系统

我想解决的问题是，在屏幕分辨率为1920 x 1200的Mac上查看网站时，图像会位于网站布局之外。调整Safari浏览器窗口的大小会使元素恢复到所需位置，但用户不必这样做。

元素包含在这个div标签中，并且位于像这样的表元素中。

<div style="position:relative;right:-200px;top:0px;" >
     <img src="/Images/member_platinum.png" height="80" width="100" />
</div>

是否有另一种方法来定位元素，使其保持其位置与屏幕分辨率无关，而使用position：absolute？我不想使用绝对定位，因为它不会产生正确的渲染效果。

或者我应该使用一些javascripting来基于屏幕分辨率渲染元素？

但我对这种方法的问题是所有其他元素都适当地呈现并保留其位置，除了那个和那个。

<style>
#adjacentPrivate div { 
    margin-left: 5px; 
    float: left; 
}
</style>

<div id="adjacentPrivate" style="position:relative;left:-560px;top:30px;">
<div id="rating2" style="font-weight:bold;color:#666;font-size:14px;position:relative;top:-30px;">@TempData["UserRatingText"]</div>
<div id="yourRating" style="position:relative;margin-left:15px;width:200px;top: 30px;"></div>
</div>
<div style="position:relative;left:10px;">
    <script>
       $('#yourRating').raty({ readOnly: Boolean("@TempData["CanVote"]"), score: parseInt('@TempData["CurrentRating"]'), click: function (score, evt) { setRating(score); } });
    </script>
</div>

所以这可能是我设计元素的方式。我不是CSS专家，那么有没有更好的方法来严格使用内联样式或CSS来实现所需的结果？或者基于屏幕分辨率的元素定位是什么方式？

如何使用内嵌样式确保元素定位？

0 个答案: