Bootstrap 3.1 gradient less mixin error on IE8 and 9 -
i have problem gradient mixin ie8 , 9 browsers because gradient mixin seems have little bug because hexa code gradien has many characters resulted bootstrap mixin. if encountred problem , solved please share. less mixin bootstrap:
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // safari 5.1-6, chrome 10+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // standard, ie10, firefox 16+, opera 12.10+, safari 7+, chrome 26+ background-repeat: repeat-x; filter: e(%("progid:dximagetransform.microsoft.gradient(startcolorstr='%d', endcolorstr='%d', gradienttype=0)",argb(@start-color),argb(@end-color))); // ie9 , down }
variables:
@table-header1: rgba(155,214,45,0.65); @table-header2: rgba(123,192,67,0.99);
less:
.table { thead tr { font-weight:normal; #gradient > .vertical(@table-header1 , @table-header2); th { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); color: @asf-table-th-color; border-color:#428bca; border-width: 1px; font-weight:bold; } } }
and result mixin:
.table thead tr { font-weight: normal; background-image: -webkit-linear-gradient(top, rgba(155, 214, 45, 0.65) 0%, rgba(123, 192, 67, 0.99) 100%); background-image: linear-gradient(to bottom, rgba(155, 214, 45, 0.65) 0%, rgba(123, 192, 67, 0.99) 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#a69bd62d', endcolorstr='#fc7bc043', gradienttype=0); }
now if hex code ie filter gradient has many characters.
this example of ie8 gradient correct hex code:
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#1e5799', endcolorstr='#7db9e8',gradienttype=0 );
your example of correct hex value wrong, can see @ http://msdn.microsoft.com/en-us/library/ms532930(v=vs.85).aspx startcolorstr should set to:
color expressed in #aarrggbb format, aa alpha hexadecimal value, rr red hexadecimal value, gg green hexadecimal value, , bb blue hexadecimal value. alpha value controls opacity of object. alpha value of 00 transparent, while value of ff opaque. string input outside hexadecimal range revert default value (#ff0000ff).
Comments
Post a Comment