: зависание не работает на IE8

Question

HI У меня небольшая проблема с моим: наведите код CSS. В IE8 моя ссылка зависает, когда я перемещаю мышь над текстом, но внешний текст не работает. Я не знаю, где моя ошибка. Нужна помощь!

HTML: -

<a href="#" class="ctaBlock" name="">text text text</a> 

CSS: -

.ctaBlock { 
    border: 1px solid #333; 
    font: 400 10px/43px arial,helvetica,sans-serif; 
    color: #333; 
    letter-spacing: .1em; 
    display: inline-block; 
    text-align: center; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    text-transform: uppercase; 
    line-height: 42px; 
    width: 34%; 
} 
#content .ctaBlock:after { 
font-size: 7px; 
font-weight: 400; 
line-height: 1; 
font-family: iconFont; 
font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: greyscale; 
font-style: normal; 
font-variant: normal; 
letter-spacing: normal; 
text-decoration: none; 
text-transform: none; 
content: '>'; 
display: inline; 
margin-left: 3px; 
} 
#content .ctaBlock:hover { 
background:rgb(255,255,255); 
background: transparent\9; 
background:rgba(255,255,255,0.3); 
filter:progid:DXImageTransform. 
Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff); 
zoom: 1; 
text-decoration: none; 
cursor: pointer; 
} 

Answer 1

У IE8 есть некоторые проблемы с обработкой прозрачных частей элементов. Я имел ту же самую проблему, некоторое время назад, и я решил ее, добавив прозрачное изображение (1px на 1px) в качестве фона в CSS:

background-image: url("transparent.png"); 

Или с данными-URL:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==); 

I подумайте, что даже более простое решение может добавить к вашей ссылке непрозрачный цвет фона. Но это зависит от ваших потребностей прозрачного фона. Я не тестировал второе решение, но вы могли бы попробовать.

Answer 2

непрозрачности свойство не работает в IE8. добавьте этот фон: rgb (255,255,255); а затем добавьте непрозрачность: 0,8 отдельно в конце. Или было бы лучше, если бы вы использовали хэш-код.