Index: /CKEditor/trunk/CHANGES.html
===================================================================
--- /CKEditor/trunk/CHANGES.html	(revision 5250)
+++ /CKEditor/trunk/CHANGES.html	(revision 5251)
@@ -74,4 +74,5 @@
 		<li><a href="http://dev.fckeditor.net/ticket/5307">#5307</a> : Hide dialog page cause problem when there's only two remains.</li>
 		<li><a href="http://dev.fckeditor.net/ticket/5343">#5343</a> : Active list item ARIA role is wrongly placed.</li>
+		<li><a href="http://dev.fckeditor.net/ticket/3599">#3599</a> : Background color style apply to text with font size been narrowly rendered.</li>
 	</ul>
 	<h3>
Index: /CKEditor/trunk/_source/plugins/styles/plugin.js
===================================================================
--- /CKEditor/trunk/_source/plugins/styles/plugin.js	(revision 5250)
+++ /CKEditor/trunk/_source/plugins/styles/plugin.js	(revision 5251)
@@ -141,4 +141,35 @@
 		},
 
+		// Removes any conflicting styles from within the specified range..
+		removeConflictsFromRange : function ( range )
+		{
+			var style = this,
+					overrides = getOverrides( style ),
+					styleCandidates = [],
+					overrideCandidates = [];
+
+			var walker = new CKEDITOR.dom.walker( range );
+			walker.evaluator = function( node )
+			{
+				if ( node.type == CKEDITOR.NODE_ELEMENT )
+				{
+					if ( node.is( style.element ) )
+						styleCandidates.push( node );
+					if ( node.getName() in overrides )
+						overrideCandidates.push( node );
+				}
+			};
+			walker.lastForward();
+
+			// First remove from element any style conflictions.
+			for ( var i = styleCandidates.length - 1 ; i >= 0 ; i-- )
+				removeFromElement( style,  styleCandidates[ i ] );
+
+			// Now remove any other element with different name that is
+			// defined to be overriden.
+			for ( i = overrideCandidates.length - 1 ; i >= 0 ; i-- )
+				removeOverrides( overrideCandidates[ i ], overrides[ overrideCandidates[ i ].getName() ] ) ;
+		},
+
 		applyToObject : function( element )
 		{
@@ -331,4 +362,10 @@
 		range.enlarge( CKEDITOR.ENLARGE_ELEMENT );
 		range.trim();
+
+		// Remove all style conflictions within the range,
+		// e.g. style="color:red" is conflicting with style="color:blue".
+		var enlargedBookmark = range.createBookmark();
+		this.removeConflictsFromRange( range );
+		range.moveToBookmark( enlargedBookmark );
 
 		// Get the first node to be processed and the last, which concludes the
@@ -495,8 +532,4 @@
 					// Move the contents of the range to the style element.
 					styleRange.extractContents().appendTo( styleNode );
-
-					// Here we do some cleanup, removing all duplicated
-					// elements from the style element.
-					removeFromInsideElement( this, styleNode );
 
 					// Insert it into the range position (it is collapsed after
@@ -923,34 +956,4 @@
 	}
 
-	// Removes a style from inside an element.
-	function removeFromInsideElement( style, element )
-	{
-		var def = style._.definition,
-			attribs = def.attributes,
-			styles = def.styles,
-			overrides = getOverrides( style );
-
-		var innerElements = element.getElementsByTag( style.element );
-
-		for ( var i = innerElements.count(); --i >= 0 ; )
-			removeFromElement( style,  innerElements.getItem( i ) );
-
-		// Now remove any other element with different name that is
-		// defined to be overriden.
-		for ( var overrideElement in overrides )
-		{
-			if ( overrideElement != style.element )
-			{
-				innerElements = element.getElementsByTag( overrideElement ) ;
-				for ( i = innerElements.count() - 1 ; i >= 0 ; i-- )
-				{
-					var innerElement = innerElements.getItem( i );
-					removeOverrides( innerElement, overrides[ overrideElement ] ) ;
-				}
-			}
-		}
-
-	}
-
 	/**
 	 *  Remove overriding styles/attributes from the specific element.