Question

我的IE7位置绝对属性出了问题。我的通知框在IE7中向右移动它在IE8中工作正常，即-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是

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%;
}

非常感谢您的帮助

检查小提琴http://jsfiddle.net/rizwanabbasi/jGHZK/

我的屏幕截图

enter image description here

Answer 1

在您的CSS .notification-bubble中，您已经定义了两次保证金（margin:10px auto;和margin-left:62px;）。尝试删除它们，然后输入：left:62px

在ie7中绝对位置，警报框移动到右对齐

1 个答案: