Question

我的错误div有以下css：

.side_error {
width: 325px;
position: absolute;
top: 0;
left: -335px;
padding: 8px 0 0 0;
text-align: right;
color: #FF0000;
display: block;
}

以及我的表td的以下css：

.main_form td {
padding: 5px 0 5px 0;
position: relative;
}

我的HTML结构：

<table class="main_form" align="center">
<tbody>
<tr><td class="title_area"><h2>Create an account</h2><span>(or <a href="#">Sign In</a>)</span></td></tr>
<tr><td><div class="side_error">please enter your full name &gt;&gt;</div><input type="text" name="fullname" placeholder="Full Name" class="input"></td></tr>
<tr><td><input type="text" name="email" placeholder="Email" class="input"></td></tr>
<tr><td><input type="password" name="pass1" placeholder="Password" class="input"></td></tr>
<tr><td><input type="password" name="pass2" placeholder="Repeat Password" class="input"></td></tr>
<tr><td class="submit_area"><span><input type="checkbox" name="terms" value="yes" id="rm"><label for="rm"> I agree to <a href="#">**** Terms</a>.</label></span><input type="submit" name="submit" class="submit" value="Create Account"></td></tr>
</tbody>
</table>

类side_error的div似乎在每个浏览器中都出现了我想要的但在Firefox（版本17.0.1）中它根本不显示，即使我使用Firebug，div也没有在悬停html代码时变色，就像它根本不存在一样。

有什么想法吗？

Answer 1

重组了你的CSS，看看这是否有帮助 -

CSS -

.side_error 
{
  width: 325px;
  position: relative;
  top: 20px;
  left: -327px;
  padding: 8px 0 0 0;
  text-align: right;
  color: #FF0000;
  display: inline-block;
}
.main_form td 
{
   position:relative;
   padding: 5px 0 5px 0;
}
table
{
   width:330px;
}

查看工作小提琴 - DEMO

Answer 2

删除left: -335px;和position: absolute;尝试使用right :10px;

或在div内的内容周围添加td并分配类：

<tr>
  <td >
    <div class="title_area">
      <h2>
       Create an account</h2><span>(or <a href="#">Sign In</a>)</span></div>
  </td>
</tr>

Div只在Firefox中不可见？

2 个答案: