IE9.js: checked and before pseudo element not working in IE8?

Question

I try using css to open and close my chatbox at the bottom right of a webpage. It works fine in Chrome and Firefox.

But when using ie9.js and test on IE 8, the code not run as expected.

Script include:

<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]>
    <script src="https://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

HTML:

<div class="chat-box">
    <input type="checkbox" />
    <label class='abc' data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
    <div id="chatForm" class="chat-box-content">Colapse me !!!
        <br/><br/>
        <br/><br/>
        <br/><br/>
    </div>
</div>

The code works fine:

.chat-box > label:before {content:attr(data-collapsed)}

The code below not working: The content of label:before not change ?

.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}

Jsfiddle: http://jsfiddle.net/leucoaeetus/C82qA/

Please help me to resolve this. How can i make title of chatbox change when checkbox checked?
Thanks in advance !