Question

HI，

为什么我无法突出显示“blurbedit”或“headlineblack”div中的文字？

我认为我做了一些草率编码以使页脚div水平排列，但那意味着顶级div不能被选中，当其中一个是输入字段时这不是很好！

看看这个例子，看看我的意思：www.gherkin.co.nz/ff/textarea.html

您可以选择底部三个div的文本，但不能选择顶部的div。

我确信这是一个非常明显的事情，但我很难发现它......

    <div class="container">
    <div class="headlinered">Homepage Blurb:</div>
    <div class="home_headline_edit">


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="blurb" cols="40" rows="10" class="box" id="blurbedit">

blurb edit content
    </textarea>
    <input name="update1" type="submit" class="box" id="editbutton" value="Update Article"></form>
    </div>
    <div class="header2cms">

    <p class="headlineblack">

    headline content
    </p>
    </div>
    </div>

    </div>

    <div class="container">
    <div class="headlinered">Footer:</div>

    <div style="height:300px;">
      <div class="footer">
        <p class="bodyblack">
       footer content

    </p>
      </div>


    <div>


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="footer" cols="30" rows="10" class="box" id="footeredit">
footer edit content
    </textarea><br />
    <input name="update2" type="submit" class="box" id="footerbutton" value="Update Article"></form>
    </div>

    <div class="footerhelp">
    (footer help)

    </div>
    </div>

    </div>

这是css：

.footerhelp{
    width: 300px;
    position: relative;
    left: 475px;
    margin-top:60px;
    top: -270px;
    overflow: hidden;

}
.footer {
    width: 170px;
    padding-top: 20px;
    position:absolute;
}
#blurbedit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
}
#footeredit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
    margin-top:20px;
    margin-left:20px;
    position: relative;
    left: 190px;
    top: 0px;
}
.headlinered {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    color: #991200;
    margin-top: 0px;
}
.headlineblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    margin-top: 5px;
    margin-bottom: 0px;
    width:455px;
}
.home_headline_edit{
    float:left;
    width: 360px;
    margin-right:20px;
}
.container {
    width: 835px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.header2cms {
    width: 455px;
    padding-left: 0px;
    padding-bottom: 40px;
    float: left;
    margin-left: -50px;
}
.bodyblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .7em;
    line-height: 140%;
    color: #000000;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}

Answer 1

您是否认为这是导致此问题的float: left和position: relative规则的.home_headline_edit和.container设置的组合？

在保留页面的视觉样式的同时，删除position: relative规则似乎有效。

闻起来像是一个浏览器错误...但我似乎无法用精简的页面重现它。

Answer 2

你使用hammer.js吗？因为Hammer.js将“selectstart”事件绑定到各种元素。至少那是我的情况。

我在尝试选择<textarea> </textarea>时遇到了麻烦

2 个答案: