代码之家 › 专栏 › 技术社区 › Jeaf Gilbert

锚定技巧在Firefox中不起作用

cross-browser css

Jeaf Gilbert · 技术社区 · 14 年前

这段代码在Firefox和Chrome中有不同的结果

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; left:0; right:20px;" />
</div>

alt text

注:div的宽度必须为50%。

谢谢:)

4 回复 | 直到 14 年前

Knio 14 年前

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <div style="position:absolute; left:0; right:20px;">
        <input type="text" style="width: 100%" />
    </div>
</div>

<input> 在某些浏览器中表现不好,请将其包装在div中

Kevin 14 年前

left:0;

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; right:20px;" />
</div>

Stephan Muller 14 年前

http://jsfiddle.net/GmMCQ/

Dan Phillimore 13 年前

在外面用盒子大小的怎么样 <div> ? 这样可以避免添加额外的:

<div style="border:1px solid red; width:50%; height:50px; position:relative; padding-right:20px; box-sizing:border-box;">
    <input type="text" style="width:100%;" />
</div>

当然,这只适用于如果你不介意添加填充到外部 <

在FF 4.0和Chrome 10.0中测试

推荐文章

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

6 年前

Dev Doc · 如何在整个应用程序的所有浏览器中禁用浏览器保存密码提示?[副本]

6 年前

funkysoul · 浏览器之间的CSS颜色差异

7 年前

Rumba · IE11上的addEventListener上未传递参数

7 年前

Basheer Kharoti · microsoft edge extension中未定义chrome

7 年前

Denisa Corbu · appendChild在IE中不工作

7 年前

Rhushikesh · 无法在angular2应用程序中接收存储事件

7 年前

Sod Almighty · 当使用rowspan时,如何在所有浏览器中正确调整表行的大小?

7 年前

Andy · 在文本区域中保存文本的独立于浏览器的方式

7 年前

Jithin Raj P R · CSS箭头在不同浏览器中的位置不同

7 年前