Css ie7中的绝对位置，警告框向右对齐_Css

Css ie7中的绝对位置，警告框向右对齐

css

Css ie7中的绝对位置，警告框向右对齐,css,Css,我在IE7上的位置绝对属性有问题。我的通知框在IE7中向右对齐在IE8、ie-9和所有其他浏览器中工作正常，但在IE7中出现问题我的HTML是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

我在IE7上的位置绝对属性有问题。我的通知框在IE7中向右对齐在IE8、ie-9和所有其他浏览器中工作正常，但在IE7中出现问题

我的HTML是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div align="center">
  <div class="notification-bubble">
    <div class="chat-bubble-arrow-border"></div>
    <div class="chat-bubble-arrow"></div>
    This should be on top in all browser </div>
  <div class="gray-form-box">
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
    <div class="seperator-line"></div>
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
    <div class="seperator-line"></div>
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
    <div class="seperator-line"></div>
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
    <div class="seperator-line"></div>
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
    <div class="seperator-line"></div>
    <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> “Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet” <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p>
  </div>
</div>
</body>
</html>

我们将非常感谢您的帮助

检查小提琴

我的屏幕截图

在CSS中，

.notification bubble

中，您已经定义了两次边距（

边距：10px自动；

和

左边距：62px；

）。尝试删除它们，只需键入：

left:62px

您可以附上一张IE7中的屏幕截图吗。我们大多数人都没有IE7，因此无法理解问题所在。当我们在css中使用两个不同的边距时，则第二个边距应用，这并不是因为这个。在konquer的某些版本中，这可能是一个问题。。。只需删除边距并键入left:67px，它就可以工作了

body
{
margin:0px;
padding:0px;    
}
.notification-bubble
{
background-color:#ffffff;
border:1px solid #c1c1c1;
font-size:35px;
height:269px;
margin:10px auto;
position:absolute;
text-align:center;
width:280px;
margin-top:45px;
-moz-box-shadow: 0px 0px 10px #666666;
-webkit-box-shadow: 0px 0px 10px #666666;
box-shadow: 0px 0px 10px #666666;
margin-left:62px;
}
.chat-bubble-arrow-border
{
  border-color: transparent transparent #c2c2c2 transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top:-21px;
  right:30px;
}
.chat-bubble-arrow
{
  border-color: transparent transparent #ffffff transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top:-19px;
  right:30px;
}
.gray-form-box
{
width:800px;
height:100%;
background-color:#f5f5f5;
border:1px solid #e5e5e5;    
float:left;
margin-bottom:30px;
}
.notification-group
{
width:26px;
height:26px;
margin:10px;
float:left;    
margin-top:2px;
background-color:#FF0000;
}
.notification-text
{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #333333;
text-align: left;
text-decoration:none;
float:left;
margin-top:10px;
line-height:18px;
margin-right:10px;
}
.notification-text a:link
{
    font-weight: bold;
    color: #3366cc;
    text-decoration:none;
}
.notification-text a:visited
{
    font-weight: bold;
    color: #3366cc;
    text-decoration:none;    
}
.notification-text a:hover
{
text-decoration:underline;
}
.notification-text a:active
{
text-decoration:underline;
}
a.notification-time:link
{
    font-weight: normal;
    color: #808080;
    text-decoration:none;    
    font-size: 11px;
}
a.notification-time:hover
{
text-decoration:underline;
}
.seperator-line
{
width:90%;    
height:1px;
background-color:#d1d0d0;
display:block;
float:left;
margin-left:5%;
}