打印

[讨论] 出道布局测试题哈,用兴趣的看看,灰常简单

看看下面的代码,测试目的是让那个input输入框宽带自适应为100%,现在它吧容器给撑开了,可以明显看出不EMPTY要长处一点来。

问题:怎么解决???

要求:只是IE和FF下测试通过

 提示:您可以先修改部分代码再运行
Anti W3C


 提示:您可以先修改部分代码再运行
input之所以会长了一点,ie6把容器给撑开了,ie7,FF会延伸出来。主要是因为它的border,当你将input的border设为0,效果就正常了。
另外,你也可以将input的width设为99%。效果也正常
我爱阿仙奴!
2楼的用了固定宽度,不行,要求自适应的

3楼:道理我知道,不过,border设为0,这个算不上解决方案吧,代价太大
另外:99%还是不能算精确对齐啊
Anti W3C
其实有一个办法是将input的border设为0,再将input的父元素的border设为黑色1px的线,代替input的border,本人没试过,楼主可以试下!
不过看楼主的留言,看到楼主好像是追求完美的人,这个很好,不过还是多关注根本的东西!楼主的代码结构与样式相夹杂,还出现了“多div症”!
我爱阿仙奴!

TOP

光是input还好解决,要是再加上select,textarea要对齐就有的烦了
可以注册6位以下ID了?

TOP

引用:
原帖由 zerty 于 2008-5-30 00:14 发表
光是input还好解决,要是再加上select,textarea要对齐就有的烦了
table是不是好解决

TOP

引用:
原帖由 cycloned 于 2008-5-30 08:45 发表


table是不是好解决
是说宽度。同样100px,这3个控件显示的实际宽度各不相同。。。
可以注册6位以下ID了?

TOP

table是不是好解决
table也不行的,还是有误差的

虽然看着是2PX,但有时很明显,特别是需要上下对齐时

!楼主的代码结构与样式相夹杂,还出现了“多div症”!这些都是为了测试方便
Anti W3C

TOP

实际上我在做这个东西,一个PHP的表单自动生成系统,需要足够的扩展性和自适应能力

我用了2天时间,发现这个2px的误差,除了去除input的边框外好像没有别的解决办法了

不过去了边框还有模拟边框太麻烦了~~~
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
Anti W3C

TOP

引用:
原帖由 kometo 于 2008-5-29 22:05 发表
2楼的用了固定宽度,不行,要求自适应的

3楼:道理我知道,不过,border设为0,这个算不上解决方案吧,代价太大
另外:99%还是不能算精确对齐啊
我没给input加固定宽度啊,外层总会有一个宽度的

那你说说你的做法吧

TOP



 提示:您可以先修改部分代码再运行
简单补充一下:用float来让内容宽度自适应。只在IE7下试过。

[ 本帖最后由 phantom 于 2008-5-30 09:48 编辑 ]

TOP

引用:
原帖由 phantom 于 2008-5-30 09:47 发表
[html]



Intput

.list {
    border: 1px solid #666;
    background-color: #FCFAE6;
    padding: 5px;
height:auto;
min-height:10px !important;float:left;
}
.EmForm_item {

    backgrou ...
。。。。。。。。。。。
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

引用:
原帖由 phantom 于 2008-5-30 09:47 发表
[html]



Intput

.list {
    border: 1px solid #666;
    background-color: #FCFAE6;
    padding: 5px;
height:auto;
min-height:10px !important;float:left;
}
.EmForm_item {

    backgrou ...
非常奇怪的结果,似乎满足要求了,可是  WHY?

很难理解
Anti W3C

TOP

input不都是在label标签里面的吗?为什么不用label来模拟input边框呢?IE下很奇怪的是lable设置1px的内补丁的时候真实上、下内补丁是2px,需要hack帮下忙。

 提示:您可以先修改部分代码再运行
[ 本帖最后由 tudou527 于 2008-6-8 15:43 编辑 ]

TOP