3

我是这些论坛和一般编码的新手。我很难理解为什么

<div style="opacity:0.5;position:absolute;left: 650px;width:300px;height:150px;background-color:#40B3DF"></div>

工作正常，显示一个半透明的蓝色方块。而当我进入以下没有。

HTML

<div id="textbox"></div>

CSS

#textbox {

left: 500px;
width:300px;
height:150px;
background-color:#40B3DF;
opacity:0.5;
position:absolute;
}

我的 css 文件的其余部分似乎与我的 HTML 配合得很好。就这一个。

如果有人认为这会有所帮助，我可以发布文件的其余部分。我正在使用我在网上找到的 CSS 重置代码，以使其更容易与多个浏览器兼容。

4

2 回答 2

3

它对我有用，没有任何问题。请参阅以下示例链接，

http://jsfiddle.net/Pkdkh/

注意：如果您在单独的 css 文件中使用该样式，则必须在 html 中添加对该文件的引用

<div style="opacity:0.5;position:absolute;left: 650px;width:300px;height:150px;background-color:#40B3DF"></div>
<div id="textbox"></div>

#textbox {
    left: 100px;
    width:300px;
    height:150px;
    background-color:#40B3DF;
    opacity:0.5;
    position:absolute;
}

更新

使用更新的代码查看工作示例，

http://jsfiddle.net/Pkdkh/2/

问题是您在#container2和#textbox样式中缺少一些右括号

于 2013-05-15T19:11:54.303 回答
-1

也许是缺少的 align: 应该在 left 之前，在第 4 行

Left 是 align 属性的一个属性。碰巧 Firefox 在缺少一些小东西时确实会传递代码，甚至看起来可以正确显示，但 Chrome 会在错误附近的某个时刻停止显示。

也许这就是为什么结果好坏参半？当我尝试从旧的 html 转换为 html5 时，这发生在我身上，这可能是我注意到它的原因。

http://www.w3.org/TR/html401/present/graphics.html#h-15.1.2

于 2014-01-24T05:25:43.747 回答