可以把IE6给丟了 - 伸缩自如的版型 (上)

可能因为某某原因，需要一个可以根据中间图片大小而伸缩自如的外框，某某原因可能是相框里的照片大小不一，又偏偏到使用者选定了照片缩图后，才知到图片的实际大小。 假设下面是我们想要的外框，要先给他分解一下。分解完之后的每个区域，照理说可以用 div 来排版，但是根据先前有限的实验结果，宽度的部份 div 没办法自动调整，除非出动 JavaScript 来帮忙动态设定。由于跟 JavaScript 很不熟，所以能不用就不用，打从心底认为 JavaScript 是一个很恶心的语言；但又不得不承认 JavaScript 在网页上能变出很多花样，解决很多问题。 过去做网页，常用 table 来排版，到现在感觉用 div 来排版才跟的上时代，才能走在时代的尖端啊！不过为了不要用 JavaScript ，还是请 table 出来客串客串帮帮忙。人算不如天算，明明 Firefox 和 Chrome 都运作的好好的，IE 又出来乱了，IE6 ~ IE8 没一个听话的。table 都用下去了，只好勉为其难的再加个 JavaScript 来治治IE的问题。 根据第六感，要能让外框可以自由伸缩应该是要这样分解吧，总共分成 13 个部份。其中 (2) (4) 只能先指定它们的高度 ( 60 px)，宽度则让它在浏览器上显示时自动调整，由于不晓得到时候中间的图片是多宽，所以 (2) (4) 的背景设定为 repeat-x。 网页 css 的部份如下。 网页图片的档案当然是越小越好，虽然说现在网路的频宽也没在怕的，但是要爱地球，要节能减碳，所以可以 repeat-x 或 repeat-y 的部份，只要準备足够让他重复的部份就够了。举例来说，#frame_top_2 和 #frame_middle_1 ，只要下面这两小张图就绰绰有餘了。 至于网页的 html 如下，好乾净！！ 基本上，Firefox 和 Chrome 已经可以用了，但是 IE 的兄弟姊妹整个不吃这一套，完全不想自己调整宽度。还是其实有不用 JavaScript 就可以解决的方法…!? 总之，都到了这个地步，就硬干吧，JavaScript 要做的事情： (1) 等选定的图片完整载入 (2) 取得图片的宽度 (3) 平均分配宽度给 frame_top2 和 frame_top_4 两个 原始的 JavaScript 是很恶心，但是当接触过 jQuery 后，我发现我爱上它了，还有种想好好学 JavaScript 的冲动，怎么可以这么好用、好上手、又好玩呀！！有了 jQuery，就算是 JavaScript 幼幼班的程度，也能够轻送的动态控制网页。就如官方网站给他的头衔一样：jQuery: The Write Less, Do More, JavaScript Library。 下回再说明怎么靠 jQuery 和 JavaScript 联手解决这个显示宽度问题。 （其实搞不好人家 IE 没问题。） via：28°Cwhite

标签:IE相关IE6