Юрий Лобанов

Попробуйте вписать комментарий или любой блок в html — если ничего не изменилось — то или кэширование виновато, или не там меняете. Если новый html появился — то открывайте отладчик хром или firebug и смотрите какие стили за что отвечают.
Вы показываете скриншоты и html, а непосредственно то, что отвечает за позиционирование (в отсутствии инлайн-стилей), то есть css, не показываете — наталкивает на мысль, что Вы взялись не за свою работу.

Использовать font-weight для активной ссылки можно только если справа ничего не стоит или задана фиксированная ширина. Все остальные варианты, в т. ч. letter-spacing — это очень шаткие варианты, очень зависимые от системы.
Вопрос можно решить с помощью js, но делать такое с помощью js не рекомендую, лучше поговорите с дизайнером.

Посмотрите frontender.com.ua/mobile-web/wtf-viewport

Есть символы необязательного переноса строки
citforum.ru/internet/html40/struct/text.html
Можете все попробовать. Но вот один из них (пробел нулевой ширины) прекрасно работает (проверил в ff, chrome, ie10):
jsfiddle.net/ASsQh/1
Но с точки зрения типографики Ваша запись неправильная, нельзя через «+» слова так писать, вроде как пробелами надо плюс обрамлять или писать солнечно-литиевая, или солнечная и литиевая.
Короче, это Вам информация для размышления, на вопрос я в общем-то ответил :)

Вы можете использовать css3 transform scale htmlbook.ru/css/transform
Но если речь идет об изменении масштаба пользователем посредством настройки браузера — то нет, Вы не сможете это сделать. Более того, за подобные штуки в мобильных версиях сайта через

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

надо руки отрывать.
Нельзя навязывать такие вещи пользователю, масштаб не просто так придуман.

codepen.io/iiil/pen/zGAFs
Работает

Возможно Вы имеете в виду - почему не срабатывает цвет ссылки? Потому что стиль ссылки внутри hover-елемента - например body имеет свой прописанный в стилях браузера цвет. Здесь наследование идет так:
body:hover a
А так как у элемента (ссылки) прописан стиль - он перекрывает это правило. При наведении
на ссылку - цвет зеленый, так как наследование в данном случае выглядит так:
body:hover a:hover - а для него стиль задан *:hover и ссылка окрашивается в зеленый.

Градиент-то здесь причем?

подскажите пожалуйста как можно решить это

Решить это можно изучив стандартные способы верстки, например вот htmlbook.ru/layout

Картинку объедините в одну, слева неактивная, справа активная (или сверху/снизу).
У Вас там есть такой класс .banner-left, в нем напишите разные background-position для обычного состояния и для hover. Для обычного состояния left, для hover - right.