IE и по­ве­де­ние ссы­лок при на­ве­де­нии

В этой за­мет­ке я опи­шу один мо­мент, ко­то­рый до­воль­но ча­сто мож­но встре­тить в слож­ной вёрст­ке с CSS, но ко­то­рый ред­ко про­яв­ля­ет себя или на ко­то­рый ред­ко об­ра­ща­ют вни­мание.

Этот мо­мент про­яв­ля­ет себя в слу­чае ко­гда в IE внут­ри ссыл­ки есть блок со свой­ством hasLay­out, то­гда мож­но за­ме­тить сле­ду­ющее:

  • клик по кар­тин­ке, рас­по­ло­жен­ной в та­ком бло­ке, не вы­зы­ва­ет пе­ре­ход по ссыл­ке;

  • при пра­вом кли­ке по бло­ку с hasLay­out не по­яв­ля­ет­ся кон­текст­ное меню ссыл­ки (т.е. IE для кон­текст­но­го меню счи­та­ет этот блок про­сто кон­тен­том, что та­к­же мож­но за­ме­тить по кур­со­ру над та­ким бло­ком).

Кро­ме того, если внут­ри ссыл­ки с про­зрач­ным (trans­par­ent) фо­ном есть ка­кой-либо эле­мент, а мы хо­тим по­ме­нять его свой­ства, ска­жем, че­рез та­кой се­лек­тор: A:hover EL {…}, то, при на­ве­де­нии на этот эле­мент, се­лек­тор при­ме­нять­ся не будет.

Соб­ствен­но, та­кое по­ве­де­ние се­лек­то­ра ис­прав­ля­ет­ся про­сто —необ­хо­ди­мо про­пи­сать фон для ссыл­ки, в та­ком слу­чае всё вста­нет на свои ме­ста (или же мож­но при­ме­нить word-spac­ing:0, что тоже по­мо­га­ет, спа­си­бо Ва­ди­му Ма­ки­шви­ли за этот метод.

Од­на­ко, в слу­чае с от­сут­стви­ем кон­текст­но­го меню и кар­тин­кой всё сложнее.

Ос­нов­ной спо­соб про­явить в та­ком слу­чае кон­текст­ное меню вы­пол­ня­ет­ся в два шага:

  1. Необ­хо­ди­мо при­ме­нить к ссыл­ке hasLay­out и про­зрач­ный фон (ска­жем, про­зрач­ный од­но­пик­сель­ный гиф или же back­ground: url(about:blank) —та­кой фон, в даль­ней­шем, я буду на­зы­вать «яв­ный про­зрач­ный фон»)

  2. Са­мо­му бло­ку с hasLay­out необ­хо­ди­мо про­пи­сать та­кой же про­зрач­ный фон и от­ри­ца­тель­ный z-in­dex с от­но­си­тель­ным по­зи­ци­о­ни­ро­ва­нием.

Если всё сде­лать пра­виль­но —очень ве­ро­ят­но (Ве­ро­ят­но —по­то­му что с IE нель­зя быть уве­рен­ным до кон­ца :)), что всё за­ра­бо­та­ет. Очень важ­но, что­бы сама ссыл­ка была с про­зрач­ным фо­ном (ина­че блок с з-ин­дек­сом не бу­дет вид­но) и без за­дан­но­го по­зи­ци­о­ни­ро­ва­ния (po­si­tion:sta­tic), ина­че опять же не сра­бо­тает.

К со­жа­ле­нию, бо­лее кор­рект­но­го и про­сто­го фик­са я не на­шёл, по­это­му в дан­ный мо­мент, ко­гда у нас есть ссыл­ка, ко­то­рую надо «тя­же­ло» офор­мить, же­ла­тель­но все до­пол­ни­тель­ные эле­мен­ты класть не внутрь ссыл­ки, а об­рам­лять её ими. Кро­ме того, по­лез­но все­гда быть уве­рен­ным, что ссыл­ка не спо­зи­ци­о­ни­ро­ва­на, т.е., по воз­мож­но­сти, по­зи­ци­о­ни­ро­вать об­рам­ля­ю­щие её эле­мен­ты. Же­ла­тель­но все­гда та­ким ссыл­кам про­пи­сы­вать hasLay­out и яв­ный про­зрач­ный фон, в та­ком слу­чае мож­но ми­ни­ми­зи­ро­вать воз­мож­ные про­бле­мы как с кон­текст­ным меню, так и с се­лек­то­ра­ми до­чер­них эле­мен­тов. Надо ска­зать, что яв­ный про­зрач­ный фон у ссы­лок та­к­же мо­жет по­мочь про­тив неко­то­рых ба­гов у Опе­ры, воз­мож­но в бу­ду­щем я опи­шу их.

Ну, а вот и несколь­ко при­ме­ров —в ко­то­рых мож­но по­смот­реть по­ве­де­ние ссы­лок в IE и по­чи­тать код.