Fokus auf Link über die gesamte Breite in Firefox - css

Wenn Sie den rechten Pfeil auf dem Schieberegler für die Startseite und die Schaltfläche zum Abspielen und Pausieren verwenden, erstreckt sich der Fokus über die gesamte Breite in Firefox. Funktioniert gut in Chrome und hofft, die gleiche Funktionalität auch in FF zu erhalten. Jede Hilfe wird sehr geschätzt.Fokus auf Link über die gesamte Breite in Firefox - css

Fühlen Sie sich frei check out staging site here

Quelle

2016-04-07 frshjb373

Können Sie bitte die relevanten (und vereinfachten) HTML- und CSS-Code-Schnipsel für den Bühnencontainer und die Pfeilelemente zu Ihrer Frage hinzufügen? Haben Sie versucht, die absolute Position für die Pfeile zu verwenden? (Der Container für die Elternphase sollte dann eine relative Position haben) –

Wie Sie Ihre Frage mit "accessibility" getaggt haben: Ich habe Ihre Website auf einem Tablet mit 1024px Ansichtsbreite besucht, der linke Pfeil überlappt den Text, der rechte Pfeil ist schwer zu sehen auf dem Bildhintergrund ist der Kontrast niedrig, vielleicht könntest du einen weißen Rand oder Schatten zum Pfeil hinzufügen) und die Play/Pause Icons sind zu klein, um sie mit den Fingern zu benutzen :) –

Nach einem kleinen Graben (Forcierung des „next“ Link :focus zu halten) Ich denke, es ist die text-indent:

.bx-wrapper .bx-controls-direction a { 
    position: absolute; 
    top: 50%; 
    margin-top: -16px; 
    text-indent: -9999px; 
    z-index: 9999; 
}

Es gibt auch eine ähnliche Regel im Einklang 145.

Wenn Sie Zugriff auf HTML und CSS ändern können, würde ich die Texteinzugsregeln entfernen. Als nächstes wickeln Sie den Text, den Sie mit einer Klasse in einer Spanne nicht angezeigt werden sollen und die gleiche Methode verwenden, die Yahoo visibly hide the text verwendet, zB

<a class="bx-next" href=""><span class="sr-only">Next</span></a>

CSS:

.sr-only { 
    height: 1px; 
    width: 1px; 
    clip: rect(1px,1px,1px,1px); 
    overflow: hidden; 
    position: absolute; 
}

versuchte ich es vor Ort in FireFox auf dem "Next" -Link und es schien zu funktionieren, aber lass es mich wissen, wenn es nicht funktioniert.

EDIT: Ich habe die IE6/7-Version von clip auf der Annahme entfernt, dass Sie keine Browser so alt unterstützen.

Quelle

2016-04-11 14:02:24

-1

Sieht aus wie diese Verbindungen ein display:inline oder inline-block benötigen. (Edit wurde dies bedeutet, um einen Kommentar zu sein)

Quelle

2016-04-07 20:10:12 Stuart

Nein, das habe ich bereits getestet und kein Glück . – frshjb373

Nun, sie erstrecken sich tatsächlich über die gesamte Breite, was bedeutet, dass sie entweder Standardelemente auf Blockebene sind, oder CSS gibt an, dass sie Blocklevel und/oder 100% Breite werden. Haben Sie versucht, ihnen explizite feste Breiten zu geben? – Stuart

Kein Würfel auch nicht. – frshjb373

Fokus auf Link über die gesamte Breite in Firefox - css

Antwort

Verwandte Themen