新足迹 › 论坛 › 澳洲生活区 › 工作学习 › 各位网站设计大师近来看看，这是怎么回事 ...

精华好帖回顾
· P&O Pacific Jewel， 2013 New Year’s Cruise 南太平洋岛国跨新年家庭游（更新完毕，谢谢斑竹加精！） (2013-1-15) jinluo	· 煮夫手记四十三——这道菜叫“甜蜜蜜蜜” (2012-2-14) amon54
· 参加征文活动：我曾经的一份工作，网店小二，大结局填坑完毕 (2009-9-29) Mylittlelover	· 啦啦啦，水了丫～～ (2011-6-28) benlomond

12 / 2 页下一页

查看: 3038|回复: 35

[IT] 各位网站设计大师近来看看，这是怎么回事 [复制链接]

cattor

银靴族

发表于 2007-8-27 19:18 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

一个简单的网页，里面一个DIV，我设了它的宽度20px，高度20px，border是2px，结果IE7出来的效果其宽和高是20X22，在Firefox里出来的效果是24X24，难道DIV有默认最小高宽的吗？我试过span，同样的问题，

代码如下：
<html>
<head></head>
<body>
<div style='position:absolute;left:100px;top:100px;width:20px;height:20px;background-color:yellow;border:2px solid red;'></div>
</body>
</html>

[ 本帖最后由 cattor 于 2007-8-27 18:25 编辑 ]

没有图像的签名档，多么凄凉。So...

不知道从什么时候开始，在每一样东西上面都有一个日子，秋刀鱼会过期，肉罐头会过期，连保鲜纸 -- 都会过期，我开始怀疑，在这个世界上，还有什么东西是不会过期的？

典

银靴族

发表于 2007-8-27 19:27 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

是不是因为它们对Border的处理不一样啊

coolioo

皮靴族

发表于 2007-8-27 19:36 |显示全部楼层

此文章由 coolioo 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 coolioo 所有！转贴必须注明作者、出处和本声明，并保持内容完整

I hate front end UI development......

cattor

银靴族

发表于 2007-8-27 19:38 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

我发觉firefox是用高宽加上border，这个可以理解，也是正确的。

关键是IE7，它生成的是20X22，而如果我改变高宽为24X24，那么IE7能够正确生成24X24的方块。

cattor

银靴族

发表于 2007-8-27 19:40 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 coolioo 于 2007-8-27 18:36 发表
I hate front end UI development......

我诚心希望早日世界大同

coolioo

皮靴族

发表于 2007-8-27 19:47 |显示全部楼层

此文章由 coolioo 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 coolioo 所有！转贴必须注明作者、出处和本声明，并保持内容完整

Firefox sucks, all enterprise system uses IE as the only browser....

degra

铜靴族

发表于 2007-8-27 19:50 |显示全部楼层

此文章由 degra 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 degra 所有！转贴必须注明作者、出处和本声明，并保持内容完整

这个是asymmetrical的，不过 IE的border 是向内， FF是向外，你可以有2个 .css, 一个给non-ie, 另一个给ie.

[ 本帖最后由 gandu 于 2007-8-27 18:51 编辑 ]

大饼

银靴族

发表于 2007-8-27 22:36 |显示全部楼层

此文章由大饼原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者大饼所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 coolioo 于 2007-8-27 18:47 发表
Firefox sucks, all enterprise system uses IE as the only browser....

我们学校的所有系统都是默认firefox的

cattor

银靴族

发表于 2007-8-27 22:48 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

同志们，同志们，现在不是争IE和Firefox的问题，

现在是我设定的一个20X20的DIV区域，在IE7中被显示成了20X22了，比例都破坏了，有解没有啊？

audream

银靴族

发表于 2007-8-27 22:57 |显示全部楼层

此文章由 audream 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 audream 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 gandu 于 2007-8-27 18:50 发表
这个是asymmetrical的，不过 IE的border 是向内， FF是向外，你可以有2个 .css, 一个给non-ie, 另一个给ie.

不错，标准的commercial design

典

银靴族

发表于 2007-8-27 23:18 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

是不是设置了min-height?

flyspirit

银靴族

发表于 2007-8-27 23:28 |显示全部楼层

此文章由 flyspirit 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 flyspirit 所有！转贴必须注明作者、出处和本声明，并保持内容完整

能不能用background image把硬撑起来

cattor

银靴族

发表于 2007-8-27 23:33 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

mid-height是标准属性或者style吗？没看到相关信息啊。

不想了，用table代替div了。

degra

铜靴族

发表于 2007-8-27 23:39 |显示全部楼层

此文章由 degra 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 degra 所有！转贴必须注明作者、出处和本声明，并保持内容完整

如不用2个.css, 加这个试试？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

cattor

银靴族

发表于 2007-8-27 23:47 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 gandu 于 2007-8-27 22:39 发表
如不用2个.css, 加这个试试？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

加了你的doctype，我的20x20的div被渲染成了24x24，还行，算是个方块，但接下来我将div设为12x12，呵呵IE6的渲染结果是16x22。我确实放弃了。

多说一句，在IE7下是16x16，也算正确。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;width:12px;height:12px;border:2px solid black;"></div>
<table style="position:absolute;left:140px;top:100px;width:12px;height:12px;border:2px solid black;"><tr><td></td></tr></table>
</body>
</html>

[ 本帖最后由 cattor 于 2007-8-27 22:50 编辑 ]

smartmonkey

布鞋族

发表于 2007-8-27 23:52 |显示全部楼层

此文章由 smartmonkey 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 smartmonkey 所有！转贴必须注明作者、出处和本声明，并保持内容完整

<html>
<head></head>
<style type="text/css" media="all">
.test {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 20px;
  height: 20px;
  background-color: yellow;
  border: 2px solid red;
}
</style>



<body>

<div class="test"></div>

</body>
</html>

flyspirit

银靴族

发表于 2007-8-27 23:53 |显示全部楼层

此文章由 flyspirit 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 flyspirit 所有！转贴必须注明作者、出处和本声明，并保持内容完整

有没有可能用background image把div给硬撑出来？

degra

铜靴族

发表于 2007-8-27 23:54 |显示全部楼层

此文章由 degra 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 degra 所有！转贴必须注明作者、出处和本声明，并保持内容完整

怎可以轻易说放弃呢。

在我的IE7很FF看不出有什么不同。你可一参考一下MSDN:
http://msdn2.microsoft.com/en-us/library/bb250395.aspx

cattor

银靴族

发表于 2007-8-28 00:02 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

谢谢smartmonkey的方法，但是你的方法引出了另两个问题

1，css的height，width与HTML中直接设置的width，height不同。比如css中height=20，表明object的content内容的高度是20，但是在html tag的style中设置height=20，表明该object的content+padding+border一起的值是20

2，同样是这个代码，如果我改边尺寸到12，那么无论IE6还是IE7中得到的就都不是一个方块了，我的初始问题又出现了。

所以现在看来，唯一一劳永逸的办法，就是用一个table来代替div。

cattor

银靴族

发表于 2007-8-28 00:04 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 gandu 于 2007-8-27 22:54 发表
怎可以轻易说放弃呢。

在我的IE7很FF看不出有什么不同。你可一参考一下MSDN:
http://msdn2.microsoft.com/en-us/library/bb250395.aspx

你的html知识很扎实啊。你的方法IE7是可行的，我只要重设高宽为减去border就可以了，很好。但是IE6不支持。

cattor

银靴族

发表于 2007-8-28 00:06 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 flyspirit 于 2007-8-27 22:28 发表
能不能用background image把硬撑起来

不行，现在不是要撑起来，是要把多于的高度消掉。看起来就好像IE对div有一个默认的最小高度18后者19。

degra

铜靴族

发表于 2007-8-28 00:10 |显示全部楼层

此文章由 degra 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 degra 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 cattor 于 2007-8-27 23:04 发表

你的html知识很扎实啊。你的方法IE7是可行的，我只要重设高宽为减去border就可以了，很好。但是IE6不支持。

晕，我不是coder 啦，只是学习一下。

那还是用2个.css 档案吧，专业一的嘛。。

cattor

银靴族

发表于 2007-8-28 00:11 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

原帖由 gandu 于 2007-8-27 23:10 发表

晕，我不是coder 啦，只是学习一下。

那还是用2个.css 档案吧，专业一的嘛。。

100个css都没用啊，IE7可行，IE6不支持。

典

银靴族

发表于 2007-8-28 00:25 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

套个Span到外面应该可以

典

银靴族

发表于 2007-8-28 00:26 |显示全部楼层

此文章由典原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者典所有！转贴必须注明作者、出处和本声明，并保持内容完整

cattor

银靴族

发表于 2007-8-28 00:30 |显示全部楼层

此文章由 cattor 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 cattor 所有！转贴必须注明作者、出处和本声明，并保持内容完整

首先大家原谅我说脏话。Fxxx Fxxx Fxxx Fxxx Fxxx Fxxx Microsoft。

解决了，问题的关键在于 overflow:hidden，大家拷贝我下面的代码试试，IE6和IE7都支持。

<html>
<head>
</head>
<body>
<div style="overflow:hidden;position:absolute;left:100px;top:100px;width:12px;height:12px;border:2px solid black;padding:0px;margin:0px;"></div>
<table style="position:absolute;left:140px;top:100px;width:12px;height:12px;border:2px solid black;"><tr><td></td></tr></table>
</body>
</html>