Question

我有一个浅绿色背景的页面。但是，在Chrome中，如果我在其上拖动另一个窗口，我可以“绘制”＃背景颜色较深。浏览器窗口顶部显示的任何内容 - 下拉菜单，停靠图标 - 除了鼠标光标外，都会影响页面的颜色。

我在Firefox中试过了这个页面，默认情况下背景颜色是较暗的阴影。（我在运行约塞米蒂的Mac上。）

我会发布截图，但我不能。抓住只会看到较暗的阴影。

＆＃13;

body {
    background-color: #60ea94;
    font-family: 'Bree Serif', serif;
    color: #333;
    display: inline;
    list-style: none;
    font-size: 24px;
}

#wrapper {    
    text-align: center;
}

#wordbox{
    margin: 0 auto;
    display: inline-block;
    margin-top: 150px;
}

#words {
    display: inline-block;
    width: 80vh; /*Change box width here*/
    min-height: 40vh; /*Change box height here*/
    overflow: auto;
    background-color: #eee;
    padding: 0px;

    -webkit-box-shadow: 0px 4px 0px 0px #4dbb76;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0px 4px 0px 0px #4dbb76;  /* Firefox 3.5 - 3.6 */
    box-shadow:         0px 4px 0px 0px #4dbb76;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

#wordsinner {
    position: fixed;

}

.textline {
    height: auto;
    border-style: solid;
}

.word {
    background-color: #60e1ea;
    padding: 18px;
    margin: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
    float: left;

    -webkit-box-shadow: 0px 4px 0px 0px #56c9d1;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0px 4px 0px 0px #56c9d1;  /* Firefox 3.5 - 3.6 */
    box-shadow:         0px 4px 0px 0px #56c9d1;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 }

#sortme {
    /*display: inline;*/
    list-style: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inner-box {
    background-color: #333;
    height: 80px;
}

button {
    background-color: #eee;
    border-width: 1;
    border-radius: 6px;
    padding: 18px;
    margin: 6px;
    margin-top: 12px;
    margin-bottom: 12px;
    font-family: 'Bree Serif', serif;
    font-size: 14px;
    color: #555;
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
    <input type="file" id="fileinput"/>

    <div id="wrapper">
        <div id="wordbox">
        <button id="nextsentence" type="button">Next sentence</button>
             <div class="textline">
                <div id="words">
                    <div id="wordsinner">
                      <!-- Words added in here -->
                    </div>
                </div>
             </div>
        </div>
    </div>

</body>
</html>

＆＃13;

我经历过多次，无法找到可能导致问题的任何内容。

我的解释是否有意义？我真的不确定这里发生了什么，所以任何帮助都会受到赞赏。

Chrome，CSS：在页面

0 个答案: