Question

我有奇怪的CSS行为。我有一个div容器（＃右键输入），它包含一个textarea和按钮，如果我没有删除我所拥有的body标签中的font: x-small arial,helvetica,sans-serif;，它们会弹出#userinput容器。有人有主意吗？字体声明如何影响这样的元素？

body { 
    font: x-small arial,helvetica,sans-serif;
    background: #000;
    margin:0;
text-align:center;
}
#userinput {
    font-size:130%;
color: #333;
    margin:10px auto 10px auto;
    padding:10px;
    background: #F7F7F7;
    width:570px;
height:135px;
    position:relative;
z-index:9999;
  border: 1px solid #888;
  -moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;

opacity: 0.85;
    /* for IE */
  filter:alpha(opacity=85);
}
#right-input{
        clear:left;
float:right;
width:480px;
}



  <div id="userinput">
    <div id="right-input">    
        Send a message to others watching!
        <form id="form" action="form.php?action=add" method="post"> 

                    <TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
            <br>
<input id="send" type="submit" value="Send!" />     
        </form>

    </div>
    </div>

Answer 1

使用您当前的代码，如果您调整#right-input的大小，则不会调整#userinput，因为#right-input会浮动，从而将其从文档流中移除。

尝试将html更改为：

<div id="userinput">
    <div id="right-input">    
        Send a message to others watching!
        <form id="form" action="form.php?action=add" method="post"> 

            <TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
            <br>
            <input id="send" type="submit" value="Send!" />     
        </form>

    </div>

    <!-- added div to clear float -->
    <div style="clear:both;"></div>

</div>

应确保您的textarea留在div。

Answer 2

如果你说font：x-small导致问题，请尝试用

替换它

font-size: 14px; /* 14px - for example */
font-family: arial,helvetica,sans-serif;

奇怪：css字体使元素移动位置

2 个答案: