|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, H0 J. L4 S. T7 f. @关键在于：max-width:780px;以及下面那行。
' [* Q7 r5 T$ {9 p固定像素适应:
) {- H# g: _# ^, Q& y" @- c, o2 w) O6 N& l4 x9 w6 ?( v& _& F0 P( X8 f$ k6 k
dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：
% p5 e& P! _5 C& k5 C" L" K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) A+ U8 C7 p+ q
<html xmlns="http://www.w3.org/1999/xhtml";> 0 \$ y, k9 W% Z; D) e- k
<head> ( o9 ]9 m( B3 X4 R7 \- G
<meta http-equiv="Content-Type" c /> $ b3 ~. _; o2 s7 J2 ~
<title>css2.0 VS ie</title> @. w( I S0 G6 G
<style type="text/css"> ; @! t, j$ @+ d9 ?9 R
<!-- 4 H9 I) h+ A+ D9 s4 l3 m3 \
body { 2 o7 @' z. _3 R: ?+ x/ Y4 Y! B0 E
font-size: 12px; 5 L1 C d) Z! `' d
text-align: center; 3 {5 O3 B4 D$ q9 a! q9 u3 A
margin: 0px;
0 M: Q" ~' l% l& `2 e, G- x% r+ _" epadding: 0px; 3 G' G: _& x( I0 ~- l
} " W0 q* |' b9 r6 |
#pic{ & @) ^* W8 t9 P4 `
margin:0 auto;
: _: y& W' F& V4 ]! R3 x width:800px;
# v& T9 _9 @* H! r% P; y, t3 m padding:0;
+ c! q1 O" R4 \ border:1px solid #333;
: R- n# k4 b0 f% I. j6 I } ' C; M6 s2 s$ Z K$ R
#pic img{
! C: m5 h. W+ S0 @ max-width:780px;
8 b* ^; u2 a9 ~9 R/ Twidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 w8 k% ~% @' dborder:1px dashed #000;
1 E1 j7 A+ A* H0 C* R8 C}
9 B, p9 s7 [& X& |- `9 c-->
: Z0 g! g" ^; d) p4 y6 D</style> : U" K. [: G1 s
</head>
( H2 T' W& a8 v<body> 0 G# b4 S7 O+ k3 F
<div id="pic"> - T9 X. i& P3 m5 z3 |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* C5 e8 B3 m, U) |2 z</div>
. V* n& z$ n7 t% Y</body> 0 H* B; h! t; O
</html>
: }) ?- }) O: Y- V" D
9 E/ D0 R- P& q) _百分比适应:
K0 r4 o4 f/ F8 B以下是引用片段：
: U, e! I. @5 Y, S) r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / p& ~* @4 S* N2 @) C
<html xmlns="http://www.w3.org/1999/xhtml";>
/ T- W: G! _7 Z8 b<head>
6 O7 F. n$ ]- D& |<meta http-equiv="Content-Type" c /> % |+ O( c/ I9 v/ h+ ^, b0 J
<title>css2.0 VS ie</title>
; Q% X2 J C/ P$ g- F7 y<style type="text/css"> 6 \% S3 w! g, ]
<!-- / K+ F0 o+ y, }; _; ^2 `
body {
% Q' ~4 J! j |0 d( R- O8 kfont-size: 12px;
. e% I" Y9 K5 G; j6 L' Ztext-align: center;
( m& R4 ]1 B, ]: N( ^margin: 0px; ( f' v' ^$ d8 G5 E0 }5 M) F
padding: 0px;
2 ~: V% S7 v7 K P8 _/ Q4 n1 t* d" G}
3 ] e5 X" t1 ?! S#pic{ $ K2 A$ |6 [4 A' \) K3 I; z
margin:0 auto; - Y, _( X$ }3 [
width:800px;
, D B1 H5 a3 [& W3 S; m' Q% W padding:0;
. _4 a j3 R$ a& a border:1px solid #333; 0 N: N1 w$ T* G) u3 J' [# Q1 \
}
% d$ w2 k b; C- `* O( ~4 c; A' f0 E#pic img{
+ l* I; w/ q' }2 ~! [% q9 s max-width:780px; 5 E8 T- \9 A* f' q1 v" Z: Q4 V
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& `4 j. W$ ^7 V6 T( k5 l5 G* tborder:1px dashed #000; 9 E; ^. M1 A0 a
} ' ^7 x2 r9 n4 N/ s: ]
-->
& l# O: m* u% ~3 e5 a& d& R</style> $ ~2 X' ~: `. ]! m3 M# a0 t6 F& }
</head> ( d T6 _1 F5 ?2 o$ [* Z
<body> - H0 W4 @( U8 a \' \" t5 D; l
<div id="pic"> H( Q1 o% T8 I) D- v" y. D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! X$ u5 w3 h' R, g2 l$ _! F% L' j
</div>
* ^# {1 e0 g& M</body> * y# j, G: f, I4 |0 Y: t
</html> |
|
发表于 2007-12-8 14:55
| 