2012-07-28 17 views
14

Zaznaczanie tekstu Podświetlenie zbyt duże po obu stronach z powodu wypełnienia.Zaznaczanie tekstu Zbyt jasne podkreślanie

Text Selection Example

http://jsfiddle.net/JamesKyle/pA7BJ/

Jak rozwiązać to za pomocą CSS? Próbowałem wielu różnych rzeczy, z których żadna nie działa. (tj. próbując wykorzystać margines i inne właściwości).

Kilka razy spotkałem się z tym problemem i nigdy nie byłem w stanie tego rozgryźć.

Jeśli ktoś mógłby mi pokazać, jak to naprawić i może wyjaśnić, w jaki sposób obliczany jest moment zaznaczenia tekstu, byłbym bardzo wdzięczny.

Wygląda na to, że nie ma to miejsca w Firefoksie/Operze (nie można przetestować IE) i może być ograniczone do przeglądarek opartych na webkitach.

rozwiązany:

Dodaj position: relative jakichkolwiek elementów wyściełanych (jest to prawdopodobnie błąd WebKit).

http://jsfiddle.net/JamesKyle/ejfsM/

+0

Jaką przeglądarkę? W przeglądarkach Firefox 14 i IE9 dostaję normalny wybór, czyli po prostu normalny sposób wyboru tekstu. W najnowszym Chrome otrzymuję to, co pokazuje Twój obraz. –

+0

Uważam, że wyróżnianie jest obsługiwane przez przeglądarkę. Zgaduję, że używasz przeglądarki Chrome. Jeśli spróbujesz tego samego z Firefoksem, zauważysz, że podświetlony jest tylko tekst. – Zhihao

+0

Dobrze, w jaki sposób mogę zapewnić spójność w przeglądarkach (w tym w webkitach)? –

Odpowiedz

8

To jest dziwne. Jednakże, zmieniając pozycję CSS wydaje się działać, np .:

div.sizing-container { 
    padding: 75px; 
    position: relative; 
} 

http://jsfiddle.net/LJLdW/

nie wiem, czy to jest możliwe w danej sytuacji.

+0

Z pewnością dziwne. Wypróbuj go, ustawiając tak, jak mówisz, a następnie resetując i nadal działa. Wypróbuj go na h1 i luka między 'h1' i pierwszym' p' nadal ma problem: http://jsfiddle.net/pA7BJ/18/ –

+0

Ustawienie wrappera na względne działa dla mnie: http://jsfiddle.net/LJLdW/ –

+0

Wydaje się, że to naprawia. –

0

Zmiana dopełnienie div.sizing-container do 75px 0px 75px 0px by rozwiązać ten problem. Podświetlenie jest tak duże ze względu na dopełnienie tego elementu.

Następnie trzeba zmienić dodają:

width: 93%; 
padding-left: 3%; 

do ciała. A następnie dodaj 10px padding do .sizing-container

To naprawi to dla mnie. To wszystko co mogę powiedzieć.

+0

To naprawdę nie jest rozwiązanie ... –

+0

Cóż, nie jest tak źle. Przepraszam, przynajmniej próbowałem. – Shawn31313

Powiązane problemy